jQuery를 사용하여 CSS3 전환 및 애니메이션의 완료를 어떻게 감지할 수 있습니까?

jQuery로 CSS3 전환 대기

CSS3 전환을 사용하여 요소에 애니메이션을 적용할 때 애니메이션이 완료된 시기를 결정하는 것이 어려울 수 있습니다. 애니메이션이 완료되면 콜백을 허용하는 jQuery 애니메이션과 달리 CSS3 전환은 그러한 메커니즘을 제공하지 않습니다. 그러나 jQuery를 사용하는 솔루션이 있습니다.

전환 완료 감지

jQuery는 CSS3 전환의 끝을 감지하는 데 사용할 수 있는 이벤트 리스너를 제공합니다. 이러한 리스너는 다음과 같습니다.

• transitionend
• webkitTransitionEnd
• oTransitionEnd
• MSTransitionEnd

이러한 이벤트에 바인딩할 수 있습니다. 추적하려는 선택기에서 바인딩() 메서드를 사용합니다. 예:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

애니메이션 완료 감지

전환과 유사하게 애니메이션도 jQuery 이벤트를 사용하여 감지할 수 있습니다. 청취자:

• animationend
• webkitAnimationEnd
• oAnimationEnd
• MSAnimationEnd

bind() 메소드를 다음과 같이 사용하십시오. 이전:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

일회성 이벤트 실행

이벤트 핸들러가 한 번만 실행되도록 하려면 jQuery의 .one() 메서드를 사용하세요.

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

모범 사례

• 모든 브라우저 접두어가 붙은 모든 이벤트 문자열을 바인드() 메소드에 전달하여 모든 이벤트를 지원합니다. 브라우저.
• 핸들러가 여러 번 실행되는 것을 방지하려면 .one()을 사용하세요.
• jQuery의 바인딩() 메서드는 더 이상 사용되지 않습니다. 버전 1.7부터는 on()이 선호됩니다.
• 또는 이벤트가 발생한 후 콜백을 분리하여 한 번만 실행되도록 off()를 사용하세요.

위 내용은 jQuery를 사용하여 CSS3 전환 및 애니메이션의 완료를 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!