すべてのブラウザのグリッド テンプレート プロパティで CSS トランジションが機能しないのはなぜですか?

CSS グリッド レイアウトのトランジションのトラブルシューティング

CSS トランジションをグリッド プロパティに適用すると、スムーズなアニメーションが可能になります。ただし、トランジションが正しく機能するには、特定の条件を満たす必要があります。

CSS 仕様によれば、トランジションは、値が変更されるだけで、grid-template-columns プロパティと Grid-template-rows プロパティで機能する必要があります。ルールの構造。ただし、これは現在 Firefox でのみサポートされています。他のブラウザでも将来の更新で実装される可能性があります。

テスト ケース

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

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>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

この場合、構文的には正しいにもかかわらず、遷移は Firefox 以外のブラウザでは機能しません。

以上がすべてのブラウザのグリッド テンプレート プロパティで CSS トランジションが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。