ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS トランジションが時々アニメーションに失敗するのはなぜですか?
ブラウザ トランジションにおける CSS リフローの問題を理解する
CSS3 トランジションを使用してレスポンシブな画像スライダーを作成する場合、 CSS プロパティが変更されたときのアニメーション。遷移プロパティを初期化したにもかかわらず、ブラウザは変更を無視し、目的のアニメーションを実行しない場合があります。
解決策: リフローを強制してアニメーションをトリガーする
この問題の解決策は次のとおりです。ブラウザのリフローを強制的に実行し、ページのレイアウトとレンダリングを再計算します。これは、要素の offsetHeight プロパティにアクセスすることで実現できます。次の JavaScript 関数はこれを実現します:
function reflow(elt) { console.log(elt.offsetHeight); }
実装:
ソリューションを実装するには、アニメーションをトリガーする CSS プロパティを変更した後に reflow() 関数を呼び出します。 。例:
ul.style.transition = 'none 0s linear'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; reflow(ul); // Forces a reflow ul.style.left = '0px';
注:
最近の最適化では、オプティマイザーとして console.log(elt.offsetHeight) を void(elt.offsetHeight) に置き換えることが含まれています。潜在的な副作用としてこのステートメントを無視する可能性は低くなります。
以上がCSS トランジションが時々アニメーションに失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。