CSS グリッド レイアウト プロパティはアニメーション化できますか?

CSS グリッド レイアウト プロパティのアニメーション化

CSS グリッド レイアウト仕様では、遷移がグリッド テンプレート列とグリッド テンプレートに適用される必要があることが示されているにもかかわらず、 -rows、現在ほとんどの環境では機能しません

現在の実装:

Firefox はグリッド プロパティのアニメーション化をサポートし、その例を提供しますここ:
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

警告:

グリッド構造は次のとおりです。行と列の寸法をアニメーション化しながら変更します。たとえば、行を追加または削除するとアニメーションが中断されます。

テスト コード:

次のテストを考えてみましょう:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
}

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>
  <!-- Additional items -->
</grid-container>

注: この例のテスト コードは、正しく動作させるために HTML コメントで囲まれています。表示します。

以上がCSS グリッド レイアウト プロパティはアニメーション化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。