CSS トランジションはすべてのブラウザの「grid-template-columns」と「grid-template-rows」で機能しますか?

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

コード スニペットでは、ラッパーの高さをアニメーション化する CSS トランジションが正しく実装されています。クラス (グリッド テンプレート行)。ただし、CSS グリッド プロパティのトランジションは、まだすべてのブラウザでサポートされているわけではありません。

現在の仕様では、グリッド テンプレート列とグリッド テンプレート行に対する変更のみである限り、トランジションはグリッド テンプレート列とグリッド テンプレート行で機能する必要があると規定されています。プロパティの値。ただし、一部のブラウザでは、これらのプロパティの遷移が機能しない場合があります。

グリッド テンプレート列およびグリッド テンプレート行での遷移を可能にする更新された実装があります。この実装は現在 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 でコンテナーの上にマウスを置いたときにグリッドの高さと幅が滑らかに変化する場合は、grid-template-columns と Grid-template で遷移します。 -行はブラウザでサポートされています。

以上がCSS トランジションはすべてのブラウザの「grid-template-columns」と「grid-template-rows」で機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。