창 크기 조정 중에 애니메이션을 중지하십시오

많은 웹 페이지는 전환 및 애니메이션을 사용하며, 일부는 페이지 크기, 요소 포지셔닝 또는 패딩의 변경으로 인해 창 크기 조정 중에 트리거됩니다. 이것은 크기 조정 중에 눈에 띄는 지연 또는 "jank"로 이어질 수 있습니다. 크기를 조정하는 동안 이러한 애니메이션이 중요하지 않으면 비활성화하면 성능을 크게 향상시킬 수 있습니다.

이 솔루션에는 전 세계적으로 애니메이션 및 전환을 비활성화하는 CSS 클래스가 포함됩니다.

이를 구현하려면 resize 이벤트에 JavaScript 이벤트 리스너를 추가하십시오.

 resizetimer를하자;
window.addeventListener ( "resize", () => {
  document.body.classlist.add ( "Resize-Animation-Stopper");
  클리어 타임 아웃 (resizetimer);
  resizetimer = settimeout (() => {
    document.body.classlist.remove ( "Resize-Animation-Stopper");
  }, 400);
});

이것은 resize-animation-stopper 클래스를 다음에 추가합니다 크기 조정 중 요소. <code>setTimeout 함수는 400ms 지연 후 클래스를 제거하여 애니메이션이 재개 될 수 있습니다. 그런 다음 CSS는 비활성화를 처리합니다.

 .resize-Animation-Stopper * {
  애니메이션 : 없음! 중요;
  전환 : 없음! 중요;
}

이 CSS 규칙은 animation: none 및 transition: none . setTimeout 가장 성능이 좋은 솔루션은 아니지만 개념을 효과적으로 보여줍니다. 이 기술은 특정 사이트 (v17)에서 구현되어 상당한 크기의 Jank를 해결하여 눈에 띄는 성능 향상이 발생했습니다. 간단한 데모는 제한된 애니메이션으로 인해 전체 영향을 보여주지 않을 수 있습니다.

위 내용은 창 크기 조정 중에 애니메이션을 중지하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!