CSS グリッド レイアウトで CSS トランジションを使用できますか?

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

トランジションは Grid-template-columns および Grid-template- で機能する必要があるという仕様の主張にもかかわらず、実際にはそうではないことがわかりました。これは、主要なブラウザでのグリッド レイアウトの実装がまだ開発中であるためです。

CSS グリッド レイアウト仕様によれば、値に対する変更のみである限り、トランジションはグリッド関連のプロパティで実際に機能するはずです。そしてルールの構造はそのまま残ります。ただし、ご覧のとおり、グリッド レイアウト プロパティのトランジションは現在、どの主要ブラウザでもサポートされていません。

Update

最近、Firefox は、グリッド レイアウト プロパティのトランジションのサポートを実装しました。 CSS グリッド レイアウトのプロパティ。ただし、この機能は開発中であり、他の主流ブラウザではまだ利用できません。

一時的な解決策

@keyframes アニメーションと遷移アニメーションを使用して、トランジション効果を作成します。以下に例を示します:

.myElement {
  transition: all 1s;
  animation: myAnimation 1s ease-in;
}

@keyframes myAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

このメソッドを使用すると、グリッド項目の位置やサイズの変化をアニメーション化できます。ただし、このアプローチでは、グリッド トラックの数やグリッド レイアウトの全体的な構造の変化をアニメーション化することはできません。

CSS グリッド レイアウトとトランジションに対するブラウザーのサポートが向上し続けるにつれて、アニメーションのサポートが向上することが期待できます。将来的にはグリッドレイアウトも関係します。

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