순수 JavaScript로 CSS3 애니메이션을 일시 중지하고 다시 시작하는 방법은 무엇입니까?

네이티브 JavaScript를 사용하여 CSS3 애니메이션을 일시 중지하고 다시 시작하는 방법:

이 질문은 CSS3 애니메이션을 일시 중지하고 다시 시작하는 방법을 찾습니다(이미지 슬라이드쇼). ) 외부 라이브러리 없이 이미지를 클릭하면 됩니다. 제공된 코드는 함수 내에서 여러 애니메이션을 일시 중지하여 이를 관리하려고 시도하지만 제한 사항에 직면합니다.

일반 JavaScript를 사용하여 CSS3 애니메이션을 효과적으로 일시 중지하고 다시 시작하려면 CSS 클래스 활용을 고려하세요.

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

애니메이션 요소에서 이 클래스를 할당하거나 제거하면 필요에 따라 애니메이션을 일시 중지하거나 재개할 수 있습니다.

function toggleAnimation(element, pause) {
  pause ? element.classList.add('paused') : element.classList.remove('paused');
}

이 접근 방식은 여러 애니메이션을 동시에 제어할 수 있으며 CSS와 JavaScript 간의 문제를 더욱 명확하게 분리합니다. 또한 클릭 이벤트가 애니메이션을 방해하지 않도록 보장합니다.

위 내용은 순수 JavaScript로 CSS3 애니메이션을 일시 중지하고 다시 시작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!