CSS3 アニメーションの再起動: リフローは要素削除の最良の代替手段ですか?

CSS3 アニメーションの再起動: 要素の削除に代わる改良版

CSS3 アニメーションを再起動するために、しばしば採用される興味深い手法には、要素の削除が含まれます。ドキュメントからアニメーション化された要素を取り出し、そのクローンを再挿入します。このアプローチは効果的ではありますが、最適化の機会を提供します。

匿名の専門家が提案した、アニメーションの再開を実現する好ましい方法には、リフローのトリガーが含まれます。これは、以下に示すように、HTMLElement の高さにアクセスするだけで実現できます。

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

この例では、アニメーションは最初に「なし」に設定されており、リセットがトリガーされます。その後、要素の offsetHeight にアクセスしてリフローが開始され、要素のサイズが計算されてキャッシュされ、それによってアニメーションのリセットが適用されます。最後に、アニメーション スタイルに「null」値を割り当てることで、アニメーション スタイルを再度再生できます。

このリフロー ベースのアプローチは簡潔かつ効率的であり、その単純さと有効性の点で以前の方法を上回っています。

以上がCSS3 アニメーションの再起動: リフローは要素削除の最良の代替手段ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。