CSS3 애니메이션이 완료된 후 콜백 함수를 어떻게 트리거할 수 있습니까?

CSS3 애니메이션이 콜백 함수를 트리거할 수 있나요?

JavaScript 애니메이션과 달리 CSS3 애니메이션은 본질적으로 콜백 함수를 실행할 수 있는 직접적인 메커니즘을 제공하지 않습니다. 완성. 그러나 이벤트 리스너를 활용하는 솔루션이 있습니다.

JavaScript 프레임워크를 사용한 구현

예를 들어 jQuery를 사용하면 이벤트 리스너를 연결하여 완료를 캡처할 수 있습니다. 이벤트를 실행하고 콜백 함수를 호출합니다:

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

Pure를 사용한 구현 JavaScript

순수한 JavaScript로 작업하려는 경우 다음 코드 조각은 다양한 애니메이션 종료 이벤트에 대한 이벤트 리스너를 추가하는 방법을 보여줍니다.

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

고려 사항

CSS3 애니메이션 이벤트에 대한 브라우저 지원은 다양하다는 점을 명심하세요. 위의 코드 조각에 사용된 이벤트 이름은 광범위한 브라우저에 적용되므로 호환성이 보장됩니다.

데모

실시간 데모를 보려면 JSFiddle을 방문하세요. http:/ /jsfiddle.net/W3y7h/

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