「transition: all」は CSS3 トランジションを遅くしますか?

「トランジション: すべて」は CSS3 トランジションの速度を妨げますか?

CSS3 トランジションを使用すると、Web 要素にアニメーション効果が提供されます。一般的な方法は、「transition: all」を使用して、複数の要素のすべてのトランジションを均一にターゲットにすることです。ただし、このアプローチがレンダリングのパフォーマンスを損なうかどうかについては議論があります。

問い合わせ: 各要素の特定のトランジション プロパティをターゲットにする可能性があります (例: "transition: opacity .2sease-in")。 「トランジション: all"?

説明: CSS エンジンが「すべての」トランジション プロパティを検索すると、単一のプロパティを持つ要素であっても、レンダリングが遅くなる可能性がありますか?

回答:

はい、「transition: all」を使用すると、パフォーマンスに重大な欠点が生じる可能性があります。ブラウザは、特定のプロパティが変更されない場合やユーザーに表示されない場合 (色や寸法の変更など)、不必要な遷移チェックを実行する場合があります。

デモ:

この Dabbletこの問題の例: http://dabblet.com/gist/1657661。ズーム レベルやフォント サイズを変更すると、表示されるトランジションが必要かどうかに関係なく、すべての要素でアニメーションがトリガーされます。

推奨:

パフォーマンスを最適化するには、「トランジション」の使用を避けてください。 : all」を選択し、ターゲットを絞ったトランジションを選択します (例: 「transition: margin .2sイーズイン」)。これにより、不必要なチェックが制限され、不要なアニメーションのリスクが軽減されます。

追加の考慮事項:

「トランジション: すべて」は、アニメーションの「スプラッシュ」などの望ましくない影響を引き起こす可能性もあります。ページの読み込みでは、トランジション効果が適用される前に初期スタイルがレンダリングされます。ターゲットを絞った移行は、この問題を軽減するのに役立ちます。

以上が「transition: all」は CSS3 トランジションを遅くしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。