CSS トランジションのためにブラウザのリフローを強制する方法: 効果的なアニメーションのガイド

CSS 遷移におけるブラウザ リフローの問題

CSS3 を使用して DOM 要素を遷移する場合、多くの場合、アニメーションをトリガーするためにブラウザ リフローを強制する必要があります。複数の CSS プロパティを順番に変更すると予期しない動作が発生する場合、ブラウザーが変更を最適化し、アニメーションが表示されなくなることがあります。

この問題を解決するには、リフローの概念を理解することが不可欠です。リフローは、ブラウザがドキュメント ツリーの一部のレイアウトを再計算するときに発生します。これは、ブロック レベル要素のサイズまたは位置の変更によってトリガーされます。

リフローを強制する手法の 1 つは、次の offsetHeight プロパティにアクセスすることです。スタイルを変更した後の要素。これは、次の関数を通じて実行できます:

function reflow(elt){
    console.log(elt.offsetHeight);
}

要素の CSS を更新した後にこの関数を呼び出すと、リフローがトリガーされ、遷移が有効になります。この手法を使用する質問のコードの変更例を次に示します。

ul.style.transition = 'none 0s linear 0s';
ul.style.left = '-600px';
reflow(ul);
ul.style.transition = 'all 0.2s ease-out';
ul.style.left = '0px';

もう 1 つのオプションは、void() 演算子を使用することです。これにより、オプティマイザがプロパティ アクセスをスキップするのを防ぐことができます。

void(elt.offsetHeight);

void は式を評価してその結果を破棄する単項演算子であるため、この手法は効果的です。これにより、プロパティへのアクセスによる副作用が確実に発生します。実行されました。

以上がCSS トランジションのためにブラウザのリフローを強制する方法: 効果的なアニメーションのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。