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 サイトの他の関連記事を参照してください。