JavaScript에서 CSS3 애니메이션 이벤트를 캡처하는 방법
- Lisa Kudrow원래의
- 2025-02-25 11:31:11555검색
키 포인트
- CSS3 애니메이션은 매끄럽고 구현하기 쉽지만 JavaScript와 달리 프레임 별 컨트롤이 없습니다. 다행히도 모든 요소에 이벤트 핸들러를 적용하여 애니메이션 상태를 결정할 수 있습니다. 이를 통해 순서대로 다른 애니메이션을 재생하는 것과 같은 잘 제어 할 수 있습니다.
-
이 간단한 CSS3 애니메이션을 고려하십시오 addEventListener 클래스가 id 가있는 요소에 적용되면 라는 애니메이션이 세 번 실행됩니다. 각 반복은 1 초 동안 지속되며 그 동안 요소가 사라지고 사라집니다.
애니메이션이 처음 시작되면
이벤트가 발사됩니다.
<code class="language-css">#anim.enable {
-webkit-animation: flash 1s ease 3;
-moz-animation: flash 1s ease 3;
-ms-animation: flash 1s ease 3;
-o-animation: flash 1s ease 3;
animation: flash 1s ease 3;
}
/* 动画 */
@-webkit-keyframes flash {
50% { opacity: 0; }
}
@-moz-keyframes flash {
50% { opacity: 0; }
}
@-ms-keyframes flash {
50% { opacity: 0; }
}
@-o-keyframes flash {
50% { opacity: 0; }
}
@keyframes flash {
50% { opacity: 0; }
}</code>
enable
anim 이벤트는 각각의 새로운 애니메이션 반복의 시작 부분, 즉 첫 번째 반복을 제외한 각 반복의 시작 부분에서 발사됩니다. flash
애니메이션 끝에서 이벤트가 발생합니다. animationstart
<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>
animationstart
animationiteration
<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code>
animationiteration
animationend
<code class="language-javascript">anim.addEventListener("animationend", AnimationListener, false);</code> animationend
<code class="language-css">#anim.enable {
-webkit-animation: flash 1s ease 3;
-moz-animation: flash 1s ease 3;
-ms-animation: flash 1s ease 3;
-o-animation: flash 1s ease 3;
animation: flash 1s ease 3;
}
/* 动画 */
@-webkit-keyframes flash {
50% { opacity: 0; }
}
@-moz-keyframes flash {
50% { opacity: 0; }
}
@-ms-keyframes flash {
50% { opacity: 0; }
}
@-o-keyframes flash {
50% { opacity: 0; }
}
@keyframes flash {
50% { opacity: 0; }
}</code>
이벤트 객체
위 코드에서 애니메이션 이벤트가 발생할 때마다 함수가 호출됩니다. 이벤트 객체는 단일 매개 변수로 전달됩니다. 표준 속성 및 방법 외에도 다음을 제공합니다.
: 애니메이션 시작 이후 시간 (초). AnimationListener
- 애니메이션이 종료되는 시점을 감지 할 수 있습니다.
-
예를 들어
코드는 기존 클래스를 제거하거나 특정 순서로 다른 CSS3 애니메이션을 적용 할 수 있습니다. animationNameview css3 애니메이션 이벤트 데모 flash데모 페이지에 버튼이 표시됩니다. 클릭하면 "활성화"클래스가 전환되어 애니메이션을 시작합니다. 애니메이션 이벤트가 트리거되면 상태가 콘솔에 표시됩니다. 애니메이션이 끝나면 버튼을 다시 클릭 할 수 있도록 "활성화"클래스가 제거됩니다. -
흥미로운 프로젝트에서 애니메이션 이벤트 캡처를 사용하는 경우 알려주십시오.
elapsedTime (이 기사를 읽는 것을 좋아한다면, 학습 가능한 것을 좋아할 것입니다. 이것은 마스터로부터 새로운 기술과 기술을 배우는 곳입니다. 회원들은 "HTML5 및"HTML5 및 "HTML5 및 인터랙티브 온라인 과정에 즉시 액세스 할 수 있습니다. 현실 세계를위한 CSS3)
flash (이 기사에 대한 의견은 마감되었습니다. CSS에 대한 질문이 있습니까? 포럼에서 물어 보지 않겠습니까?)
<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>
CSS3 애니메이션 및 JavaScript 이벤트 핸들러에 대한 FAQ (FAQ)
이 코드에서 "AnimationEnd"는 우리가 듣고있는 이벤트입니다. CSS3 애니메이션이 완료되면 발사됩니다. flash
예, JavaScript를 사용하여 CSS3 애니메이션의 방향을 변경할 수 있습니다. "애니메이션 방향"속성은 교대주기 중에 애니메이션이 반대로 재생되어야하는지 여부를 정의합니다. 이 속성을 다음과 같이 JavaScript로 설정할 수 있습니다.
이 코드에서는 애니메이션이 천천히 시작한 다음 가속됩니다.
이 코드에서는 페이지가 2 초 동안로드 된 후 애니메이션이 시작됩니다. <code class="language-css">#anim.enable {
-webkit-animation: flash 1s ease 3;
-moz-animation: flash 1s ease 3;
-ms-animation: flash 1s ease 3;
-o-animation: flash 1s ease 3;
animation: flash 1s ease 3;
}
/* 动画 */
@-webkit-keyframes flash {
50% { opacity: 0; }
}
@-moz-keyframes flash {
50% { opacity: 0; }
}
@-ms-keyframes flash {
50% { opacity: 0; }
}
@-o-keyframes flash {
50% { opacity: 0; }
}
@keyframes flash {
50% { opacity: 0; }
}</code>
이 코드에서는 애니메이션이 무기한 반복됩니다.
이 코드에서는 애니메이션이 2 초 동안 지속됩니다.
<code class="language-javascript">var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);</code>
<code class="language-javascript">anim.addEventListener("animationiteration", AnimationListener, false);</code>
예, JavaScript를 사용하여 CSS3 애니메이션의 "애니메이션 타이밍 기능"을 변경할 수 있습니다. 이 속성은 애니메이션의 속도 곡선을 지정합니다. 이 속성을 다음과 같이 JavaScript로 설정할 수 있습니다.
위 내용은 JavaScript에서 CSS3 애니메이션 이벤트를 캡처하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!