在窗口大小的過程中停止動畫

許多網頁都利用過渡和動畫，其中一些網頁在窗口調整過程中觸發，因為頁面大小，元素定位或填充的變化。這可能會導致調整大小期間明顯的滯後或“ jank”。如果這些動畫在調整大小期間並不重要，則將其禁用可以顯著提高性能。

該解決方案涉及全球禁用動畫和過渡的CSS類：

要實現此功能，請為resize事件添加JavaScript事件偵聽器：

讓RESIZETIMER;
window.addeventlistener（“ resize”，（）=> {
  document.body.body.classlist.add（“ resize-animation-stopper”）;
  cleartimeout（resizetimer）;
  resizetimer = settimeout（（）=> {
    document.body.body.classlist.remove（“ resize-animation-stopper”）;
  }，400）;
}）;

這將resize-animation-stopper級類別添加到調整大小的元素。 <code>setTimeout功能在400毫秒延遲後刪除了類，從而允許動畫恢復。然後，CSS處理殘疾：

 。
  動畫：無！
  過渡：無！
}

此CSS規則應用animation: none與transition: none到身體內部的所有元素。儘管setTimeout可能不是最具性能的解決方案，但它有效地展示了該概念。該技術是在特定站點（V17）上實施的，以解決重大的jank大小，從而顯著提高了性能。請注意，一個簡單的演示可能不會顯示由於動畫有限而顯示的全部影響。

以上是在窗口大小的過程中停止動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！