web-dev-qa-db-ja.com

CSSグリッドレイアウトでのCSSトランジションの使用

私は粘着性のあるヘッダーにトランジション効果を持たせようとしているので、単なるスナップ移動ではなく緩和されます。

私は何を間違えていますか？

これが私の作業バージョンです：

http://codepen.io/juanmata/pen/RVMbmr

基本的に、次のコードはクラスtinyをラッパークラスに追加しますが、これは正常に機能します。

$(window).on('load', function() {
    $(window).on("scroll touchmove", function () {
        $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
    });
});

CSSの部分は次のとおりです。

.wrapper {
    grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.tiny {
    grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}

ヘッダーは本来のサイズに縮小しますが、アニメーションはありません。何かを見落としているのでしょうか、それともグリッドでトランジションが機能しないのでしょうか？

これはcss-gridのドキュメントへのリンクです。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

$(window).on('load', function() {
  $(window).on("scroll touchmove", function() {
    $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
  });
});
* {
        margin:0;
        padding:0;
}

.wrapper {
        display: grid;
        grid-gap: 0px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
        grid-template-areas:
                "head head head head"
                "main main main main"
                "leader leader leader leader"
                "foot foot foot foot";
        background-color: #fff;
        color: #444;
}
.tiny {
        grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}
.box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        font-size: 150%;
}
.box .box {
        background-color: lightcoral;
}

.head {
        grid-area: head;
        background-color: #999;
        z-index: 2;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: 20% 1fr;
        -o-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        position: sticky;
        top: 0;
}

.logo{
        height: inherit;
        grid-column: 1;
        grid-row: 1;
        background-color:red;
        position: relative;
        overflow: hidden;
    }
.logo img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        max-width: 100%;
        height: auto;
    }
.main {
        grid-area: main;
        /* CSS Grid */
        z-index: 1;
        grid-column: head-start / head-end;
        grid-row: head-start / leader-start;
        background-color: red;
}
.leader {
        grid-area: leader;
        z-index:1;
        display: grid;
        grid-gap: 0px;
        grid-template-columns: repeat(4, 1fr  );
}
.foot {
        grid-area: foot;
        z-index:1;
}
<div class="wrapper">
  <div class="box head">
    <div class="box logo">
      <a href="#"><img src="https://unsplash.it/200/300/?random" /></a>
    </div>
    <div class="box nav">nav</div>
  </div>
  <div class="box main">main</div>
  <div class="box leader">
    <div class="box leader-1">1</div>
    <div class="box leader-2">2</div>
    <div class="box leader-3">3</div>
    <div class="box leader-4">4</div>
  </div>
  <div class="box foot">foot</div>
</div>
csscss3css-transitionscss-grid
31
Dan

仕様によれば、遷移はgrid-template-columnsおよびgrid-template-rowsで動作するはずです。

7.2。明示的なトラックサイズ変更：grid-template-rowsおよびgrid-template-columnsプロパティ

アニメーション化可能：長さ、パーセンテージ、または計算の単純なリストとして、リスト内の長さ、パーセンテージ、または計算コンポーネントの値のみが異なる場合

したがって、ルールの構造を変更せずにプロパティの値のみを変更する限り、解釈が正しい場合、遷移は機能するはずです。 しかし、そうではありません。

UPDATE

これは機能しますが、これまでのところFirefoxでのみ実装されています。他のブラウザの更新についてはこちらをご覧ください。 https://codepen.io/matuzo/post/animating-css-grid-layout-properties

〜 @ bcbrianによるコメントへの貢献

これが私が作成したテストです。

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
  
  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}
<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

jsFiddle demo

テストでは、遷移は高さと背景色で機能しますが、grid-template-rowsまたはgrid-template-columnsでは機能しません。

25
Michael_B

回避策として、グリッドアイテムのサイズをgrid-template-columnsまたはgrid-template-rowsの代わりに使用できます。

あなたができる：

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  background-color: black;
  height: 230px;
  transition: 2s;
  
  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

grid-container:hover {
  background-color: red;
  height: 130px;
}

grid-item {
  height: 100px;
  transition: height 2s;
  background-color: lightgreen;
}

grid-container:hover .first-row {
  height: 25px;
}

grid-container:hover .last-row {
  height: 75px;
}
<grid-container>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
</grid-container>

もう1つの2x2の例を次に示します。 https://codepen.io/erik127/pen/OvodQR

そして、ここに列または行を追加できるより広範な例： https://codepen.io/erik127/pen/rdZbxL

残念ながら、それは多くのjavascriptであり、grid-template-columnsとgrid-template-rowsがアニメート可能であればいいでしょう。

いくつかのユースケースで動作する可能性のある別の選択肢（グリッド項目が複数の行にまたがっていない場合）は、グリッドと一緒にflexboxを使用することです。

5
Erik

GSAPを使用して、grid-template-columnsおよびgrid-template-rowsプロパティをアニメーション化しました。

function changeGridTemplateColumns(pattern) {
  TweenMax.to(".container",
    1, {
      gridTemplateColumns: pattern
    }
  );
}

function changeGridTemplateRows(pattern) {
  TweenMax.to(".container",
    1, {
      gridTemplateRows: pattern
    }
  );
}

$(document).ready(
  function() {
    $(".el-a,.el-b,.el-c").mouseenter(
      function() {
        changeGridTemplateRows("2fr 1fr");
      }
    );
    $(".el-d,.el-e,.el-f").mouseenter(
      function() {
        changeGridTemplateRows("1fr 2fr");
      }
    );

    $(".el-a,.el-d").mouseenter(
      function() {
        changeGridTemplateColumns("2fr 1fr 1fr");
      }
    );

    $(".el-b,.el-e").mouseenter(
      function() {
        changeGridTemplateColumns("1fr 2fr 1fr");
      }
    );

    $(".el-c,.el-f").mouseenter(
      function() {
        changeGridTemplateColumns("1fr 1fr 2fr");
      }
    );

    $(".container").mouseleave(
      function() {
        changeGridTemplateColumns("1fr 1fr 1fr");
        changeGridTemplateRows("1fr 1fr");
      }
    );
  }
);
.container {
  width: 50vw;
  height: 50vw;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: "a b c" "d e f";
}

.el-a {
  grid-area: a;
  background-color: skyblue;
}

.el-b {
  grid-area: b;
  background-color: darkseagreen;
}

.el-c {
  grid-area: c;
  background-color: coral;
}

.el-d {
  grid-area: d;
  background-color: gold;
}

.el-e {
  grid-area: e;
  background-color: Plum;
}

.el-f {
  grid-area: f;
  background-color: beige;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="el-a"></div>
  <div class="el-d"></div>
  <div class="el-b"></div>
  <div class="el-e"></div>
  <div class="el-c"></div>
  <div class="el-f"></div>
</div>
2
Pep Santacruz

今のところ、グリッドテンプレートの移行は機能していません。ただし、次のような変換を使用できます。

jsFiddle

var button = document.querySelector("#btnToggle");
button.addEventListener("click",function(){
        var content = document.querySelector(".g-content");
  if(content.classList.contains("animate"))
    content.classList.remove("animate");
  else
          content.classList.add("animate");
});
html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}

.g-content{
  display:grid;
  height:100%;
  grid-template-columns: 200px 1fr;
  grid-template-rows:60px 1fr 30px;
  grid-template-areas: 
    "g-header g-header"
    "g-side g-main"
    "g-footer g-footer";
 overflow-x:hidden;
}

.g-header{
  grid-area:g-header;
  background:#2B4A6B;
  display:grid;
  grid-template-columns: max-content 1fr;
}

.g-header button{
  align-self:center;
  margin:0 5px;
}

.g-side{
  grid-area:g-side;
  background:#272B30;
  transition:all 0.5s;
}

.g-main{
  grid-area:g-main;
  background:#FFFFFA;
  transition:all 0.5s;
}

.g-footer{
  grid-area:g-footer;
  background:#7E827A
}

.animate .g-main{
  width:calc(100% + 200px);
  transform:translateX(-200px);
}

.animate .g-side{
  transform:translateX(-200px);
}  
<div class="g-content">
  <div class="g-header">
    <button id="btnToggle">
    Toggle
    </button>
  </div>
  <div class="g-side">
  </div>
  <div class="g-main">
  test
  </div>
  <div class="g-footer">
  </div>
</div>
1
Emre HIZLI

別のアプローチは、transformを使用することです。 CPUアクセラレーションの代わりにGPUアクセラレーションを使用するため、不透明度に沿った変換が60fpsを達成できるため、実際にはさらに優れている場合があります（ブラウザの作業量が少なくなります）。

例を示します：https://codepen.io/oneezy/pen/YabaoR

.sides {
  display: grid;
  grid-template-columns: 50vw 50vw;
}

.monkey { animation: 0.7s monkey cubic-bezier(.86,0,.07,1) 0.4s both; }
.robot { animation: 0.7s robot cubic-bezier(.86,0,.07,1) 0.4s both; }

@keyframes monkey {
  0% { transform: translate(-50vw); }
  100% { transform: 0; }
}

@keyframes robot {
  0% { transform: translate(50vw); }
  100% { transform: 0; }
}
1
Oneezy

私の場合、このコードを使用してサイドバーメニューを開こうとしました。

.wrapper{
  display: grid;
  grid-template-columns: 0 100%;
  transition: all 1s;
  .sidebar{
    background-color: blue;
  }
  .content{
    background-color: red;
  }
}
.wrapper.sidebar-open{
  grid-template-columns: 300px 100%;
  transition: all 1s;
}

しかし、transitionはgrid-template-columnsでは機能していませんでした。これは私の解決策です：

.wrapper{
  display: grid;
  grid-template-columns: auto 100%;
  .sidebar{
    width: 0;
    background-color: blue;
    transition: all 1s;
  }
  .content{
    background-color: red;
  }
}
.sidebar.sidebar-open{
  width: 300px;
  transition: all 1s;
}

おそらく、それは誰かを助けます。

0
Dmitry Grinko