ウィンドウのサイズ変更中にアニメーションを停止します

多くのWebページでは、トランジションとアニメーションを利用していますが、その一部は、ページサイズ、要素の位置付け、またはパディングの変更により、ウィンドウのサイズ変更中にトリガーされます。これにより、サイズ変更中に顕著な遅延または「Jank」につながる可能性があります。これらのアニメーションがサイズ変更中に重要でない場合、それらを無効にするとパフォーマンスが大幅に向上する可能性があります。

ソリューションには、アニメーションと遷移をグローバルに無効にするCSSクラスが含まれます。

これを実装するには、 resizeイベントにJavaScriptイベントリスナーを追加します。

 resizetimerをさせてください。
window.addeventlistener（ "resize"、（）=> {
  document.body.classlist.add（ "resize-animation-stopper"）;
  ClearTimeout（Resizetimer）;
  Resizetimer = setimeout（（）=> {
    document.body.classlist.remove（ "sezize-animation-stopper"）;
  }、400）;
}）;

これによりresize-animation-stopperクラスが追加されますサイズ変更中の要素。 <code>setTimeout関数は、400msの遅延後にクラスを削除し、アニメーションが再開できるようにします。次に、CSSは無効化を処理します。

 .rsize-animation-stopper * {
  アニメーション：なし！重要。
  移行：なし！重要。
}

このCSSルールはanimation: noneとtransition: none 。 setTimeout最もパフォーマンスの高いソリューションではないかもしれませんが、概念を効果的に実証しています。この手法は、特定のサイト（V17）に実装され、重要なサイズ変更JANKに対処し、その結果、顕著なパフォーマンス改善が行われました。アニメーションが限られているため、単純なデモでは完全な影響を紹介しない場合があることに注意してください。

以上がウィンドウのサイズ変更中にアニメーションを停止しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。