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

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

콜백을 쉽게 지원하는 JavaScript 애니메이션과 달리 CSS3 애니메이션에는 처음에는 이 기능이 부족했습니다. 그러나 이벤트 리스너를 사용하면 이제 CSS3 애니메이션에 대한 콜백을 구현할 수 있습니다.

이벤트 기반 콜백 구현

CSS3에서 콜백을 구현하는 핵심 애니메이션을 들을 수 있는 이벤트로 인식하는 것입니다. 관련 DOM 요소에 이벤트 리스너를 추가하면 애니메이션이 완료될 때 콜백을 실행할 수 있습니다.

jQuery 이벤트 바인딩

jQuery를 사용하면 이벤트 리스너를 애니메이션 요소는 다음과 같습니다.

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

이는 이벤트 리스너를 세 가지 가능한 이벤트 유형에 바인딩합니다. oanimationend, animationend 및 webkitAnimationEnd. 초기 이벤트에는 다양한 브라우저와의 호환성을 보장하기 위해 공급업체 접두사가 붙습니다.

순수 JavaScript 이벤트 바인딩

jQuery를 사용하지 않으려면 순수 JavaScript를 사용하여 다음을 수행할 수 있습니다. 이벤트 리스너 추가:

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

이 접근 방식은 동일한 결과를 얻지만 기본 JavaScript를 사용합니다. code.

데모 및 브라우저 호환성

이 콜백 구현에 대한 라이브 데모는 http://jsfiddle.net/W3y7h/에서 볼 수 있습니다. 대부분의 최신 브라우저는 이러한 이벤트 유형을 지원하지만 콜백을 구현할 때 항상 브라우저 간 호환성을 확인하는 것이 좋습니다.

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