要素を削除せずに CSS3 アニメーションを効率的に再起動する方法

CSS3 アニメーションの再起動: より効率的なテクニック

CSS3 アニメーションを使用する場合、イベント後にアニメーションを再起動することが必要になることがよくあります。クリックなど。ただし、影響を受ける要素のスケールやその他のプロパティを直接設定すると問題が発生し、割り当ての遅延や複雑な連鎖が発生する可能性があります。

要素削除のトリック

提案されている 1 つの型破りな方法は次のとおりです。アニメーション要素をドキュメントから削除し、複製バージョンを再挿入します。効果的にアニメーションを再起動しますが、不必要な複雑さと潜在的なパフォーマンスの問題が発生します。

Reflow to the Rescue

よりエレガントで効率的な解決策は、リフローをトリガーすることです。 。リフローは、DOM または CSS の変更に応じてブラウザーが要素のレイアウトを再計算するプロセスです。この動作を利用すると、要素を削除せずにアニメーションを効果的にリセットできます。

次の JavaScript コードは、このアプローチを示しています。

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

offsetHeight プロパティが使用されます。リフローをトリガーし、ブラウザにレイアウトの再計算とアニメーション設定の再適用を強制します。これにより、遅延や面倒な連鎖を発生させることなく、効果的にアニメーションがすぐに再開されます。

この手法は、幅広い CSS3 アニメーションに適用でき、Web アプリケーションやフレームワークに簡単に統合できます。これは、不要な副作用を引き起こすことなくアニメーションを再開するためのシンプルかつ効果的な方法を提供します。

以上が要素を削除せずに CSS3 アニメーションを効率的に再起動する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。