円滑なCSSグリッド列のアニメーション化

Question

CSSグリッドレイアウトを使用して、ウェブサイト上のさまざまな部分を配置しています。私はgrid-column: x/x;とgrid-row x/x;を使ってページ上の位置とサイズを設定します。それは本当にうまくいっています。

今、画面サイズが変更されたときに発生する2つのグリッド列の修正の間のスムーズな移行をアニメーション化しようとしています。変更はgrid-column: 3/9;からgrid-column: 2/10;になります。つまり、divのいずれかがそれぞれ1frずつ増加することを意味します。現時点では単に「ピング」してしまいますが、2つの間でスムーズに移行したいと考えています。

誰かがそれに取り組む方法を知りましたか？ここで

は私のCSSファイルからの抜粋です：

nav { 
    background-color: $company-blue; 
    border   : 3px solid $company-yellow; 
    opacity   : 0.8; 
    grid-column  : 3/9; 
    grid-row  : 3/4; 
    ... 
    @media screen and (max-width: 1378px) { 
    grid-column : 2/10; 
    } 
} 

Answer 1

grid-columnまたはgrid-row性質のためのCSSの遷移はありません。何かを持つために、

grid-column: 2.5/9.5; 

...レンダリングの観点からは意味をなさないでしょう。
あなたがブラウザをコーディングしているとします。 grid-column:2.5/9.5;をどのようにレンダリングしますか？

ここで動作するCSSトランジションは、コンテンツがカラム間を移動するときにCSSカラムで動作することを期待するのと同じです。

CSSグリッドでアニメーションが必要ですか？ JavaScriptはあなたの唯一の友達です。ここで

は、私はそれについて移動したい方法は次のとおりです。

1. 各グリッド要素のクローン内容は、絶対位置の容器に。グリッドに本物の新しい位置
2. フェードクローン化されたコンテンツアウトや
3. でバック本当の一つに
4. アニメイトクローン化された要素を新しいgrid-columnsプロパティを適用不透明
5. を使用して
6. フェード実際のコンテンツうち、削除クローン。

この問題をクロスブラウザ/クロスデバイスにすると、いくつかの問題が発生する可能性がありますが、それは可能です。

注：あなたは二つのことを支援するために、あなたのグリッド要素とグリッド要素の内容とのラッパーの層を追加することを検討することをお勧めします：

1. 各グリッド要素は一つだけを持っていることを確認してください子（遷移を計算するための幅/高さを取得して簡単にするために）
2. は、あなたが、私は非常に貧しいハックでそれを騙してきたところ

Answer 2

移行するために知っているように、各要素を追跡簡素化します。しかし、それは動作します...

nav { 
    background-color: $company-blue; 
    border   : 3px solid $company-yellow; 
    opacity   : 0.8; 
    grid-column  : 3/9; 
    grid-row  : 3/4; 
    @media screen and (max-width: 1378px) { 
     position : fixed; 
     z-index : 9999; 
     width  : 60%; 
     margin  : 155px 20% 0; 
     animation : grow-fixed 1s ease; 
     @keyframes grow-fixed { 
      0% { 
       width : 60%; 
       margin: 155px 20% 0; 
      } 

      100% { 
       width : 80%; 
       margin: 155px 10% 0; 
      } 
     } 
     width  : 80%; 
     margin  : 155px 10% 0; 
     grid-column: 2/10; 
     grid-row : 3/4; 
    } 
    @media screen and (min-width: 1378px) { 
     position : fixed; 
     z-index : 9999; 
     width  : 80%; 
     margin  : 155px 10% 0; 
     animation : shrink-fixed 1s ease; 
     @keyframes shrink-fixed { 
      0% { 
       width : 80%; 
       margin: 155px 10% 0; 
      } 

      100% { 
       width : 60%; 
       margin: 155px 20% 0; 
      } 
     } 
     width  : 60%; 
     margin  : 155px 20% 0; 
     grid-column: 3/9; 
     grid-row : 3/4; 
    }