JavaScript만 사용하여 CSS3 애니메이션을 일시 중지하고 다시 시작하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

JavaScript만 사용하여 CSS3 애니메이션을 일시 중지하고 다시 시작하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-12-07 10:43:11

원래의

715명이 탐색했습니다.

How Can I Pause and Resume CSS3 Animations Using Only JavaScript?

JavaScript를 사용하여 CSS3 애니메이션 일시 중지 및 재개

문제:

일시 중지 및 재개 방법 외부에 의존하지 않고 JavaScript를 사용하는 CSS3 애니메이션 라이브러리?

해결책:

CSS 애니메이션:

CSS 키프레임을 사용하여 애니메이션을 정의합니다. 각각의 불투명도 값과 타이밍 지정 step.

일시 중지 및 재개 기능:

애니메이션 일시 중지 및 재개를 처리하는 JavaScript 함수 생성:

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

로그인 후 복사

이벤트 청취자:

일시 중지 및 재개 작업을 트리거하려면 애니메이션 요소에 이벤트 리스너를 추가하세요.

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

로그인 후 복사

추가 참고 사항:

애니메이션을 여러 번 일시 중지하려면 새 이벤트 리스너를 추가하기 전에 기존 이벤트 리스너를 지우세요.
또는 제공된 답변에서 제안된 CSS 클래스 접근 방식을 사용하세요.

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

로그인 후 복사

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

로그인 후 복사

이 CSS를 전환하면 애니메이션을 일시 중지하고 다시 시작할 수 있습니다. 이벤트 리스너가 필요 없는 클래스입니다.

위 내용은 JavaScript만 사용하여 CSS3 애니메이션을 일시 중지하고 다시 시작하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!