CSS3 애니메이션으로 콜백 함수를 어떻게 트리거할 수 있나요?

CSS3 애니메이션용 콜백 사용

웹 개발 영역에서 다음과 같은 질문이 제기됩니다. CSS3 애니메이션이 콜백 기능을 트리거할 수 있습니까? JavaScript 애니메이션은 이 기능을 제공하지만 CSS3 대응물에는 이러한 기본 지원이 부족합니다.

이 제한을 피하기 위해 CSS3 애니메이션은 이벤트 리스너와 결합하여 애니메이션이 본질적으로 이벤트 자체라는 사실을 활용할 수 있습니다. 개발자는 jQuery 또는 순수 JavaScript를 사용하여 이러한 이벤트를 구독하고 완료 시 지정된 콜백을 호출할 수 있습니다.

jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

순수 JavaScript:

element.addEventListener("webkitAnimationEnd", callfunction, false);
element.addEventListener("animationend", callfunction, false);
element.addEventListener("oanimationend", callfunction, false);

이러한 이벤트 리스너는 모든 애니메이션 HTML 요소에 연결할 수 있습니다. 애니메이션이 끝점에 도달하면 지정된 콜백 함수가 실행됩니다.

참고: 브라우저마다 이벤트 리스너 이름에 다양한 접두사가 표시될 수 있습니다. 제공된 예는 널리 사용되는 접두사를 다루므로 주요 브라우저 간의 호환성을 보장합니다.

실시간 데모를 보려면 다음을 방문하세요.

http://jsfiddle.net/W3y7h/

위 내용은 CSS3 애니메이션으로 콜백 함수를 어떻게 트리거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!