[解決済み] TailwindCSSのtransition-allとtransitionの違いは何ですか？

質問

Tailwindは、CSSプロパティの遷移を制御するための複数のユーティリティを提供しています。 transition と transition-all .

両方のクラスのCSSプロパティを調べてみたら、ここに同じ順番で並んでいました。

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

両クラスの違いと、一般的なトランジションにはどちらを使用すればよいのでしょうか？

どのように解決するのですか？

この違いを理解するためには、アニメート可能なプロパティについて重要なことを理解する必要があります。レイアウト変更をトリガーするものとしないものがあるのです。

レイアウト変更を引き起こすプロパティは、パフォーマンスに影響を与えるので、できるだけ避けることをお勧めします。

レイアウト変更のトリガーとならないプロパティは、パフォーマンスへの影響が少ないので、アニメーション化することをお勧めします。

は transition クラスは、2つ目のプロパティ (レイアウト変更のトリガーとならないもの) をグループ化しているのに対して transition-all をすべてグループ化します。

に頼るのがよいでしょう。 transition を使用することはできるだけ避けなければなりません。 transition-all しかし、どうしてもアニメーションさせなければならない場合は すべて を使用します。

ここで、私が言っていることを理解するのに良い参考文献を紹介します。 https://csstriggers.com/

をチェックすると color を読み取ることができます。

色を変えてもジオメトリが変化するきっかけにならないのは良いことです。

余談ですが transform は、パフォーマンスという点では最高です。レイアウト変更のトリガーにもならないし、ペイントのトリガーにもならない。

transform を変更しても、ジオメトリの変更やペイントがトリガされないので、非常に優れています。これは、GPU の助けを借りてコンポジター スレッドでこの操作を実行できる可能性が高いことを意味します。