CSS トランジションが CSS グリッド レイアウトで機能しないのはなぜですか?

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

問題:

CSS グリッド レイアウトを使用したスティッキー ヘッダーの実装、下にスクロールするとヘッダーが縮小するため、ユーザーはスムーズなトランジション効果を達成するのに苦労します。 CSS トランジションを .wrapper クラスに追加したにもかかわらず、アニメーションは発生しません。

分析:

CSS グリッド レイアウト仕様によれば、トランジションはグリッド上で機能するはずです。 -template-columns プロパティと Grid-template-rows プロパティ。ただし、この例ではトランジションは適用されません。

解決策:

現時点では、グリッド プロパティの CSS トランジションは Firefox でのみサポートされています。目的のアニメーション効果を有効にするには、サポートされている方法を使用するようにレイアウトを変更する必要があります。代替の 1 つは、グリッドの代わりに Flexbox を使用することです。

修正を示す更新されたコード スニペットは次のとおりです。

.wrapper {
  display: flex;
  height: 100vh;
  transition: all 0.5s;
}

.wrapper.tiny {
  height: 50vh;
}

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