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

CSS3 전환 및 애니메이션 완료 감지

CSS3 애니메이션 또는 전환으로 작업할 때 일반적인 문제가 발생합니다. 즉, 애니메이션 또는 전환이 완료된 시점을 확인하는 것입니다. 이 지식은 DOM에서 요소를 제거하는 등의 후속 작업을 수행하는 데 중요합니다.

jQuery에서는 애니메이션이 완료된 후 "제거"가 발생하도록 지정할 수 있는 옵션이 있습니다. 그러나 CSS3 전환 또는 애니메이션의 경우 끝점을 감지하는 특정 방법이 있습니다.

전환

전환의 경우 jQuery는 전환의 끝을 수신하는 방법을 제공합니다.

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

애니메이션

마찬가지로 애니메이션의 경우 다음을 수행할 수 있습니다. 사용:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

이벤트가 여러 브라우저에서 지원되도록 하려면 브라우저 접두사가 붙은 모든 이벤트 문자열을 bin() 메서드에 전달할 수 있습니다.

일회성 이벤트 처리

이벤트 핸들러가 한 번만 실행되도록 하려면 jQuery의 one()을 사용할 수 있습니다. 메서드:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

더 이상 사용되지 않는 메서드

현재 jQuery의 바인딩() 메서드는 더 이상 사용되지 않으며 on()이 선호됩니다. 콜백 함수에 off()를 사용하여 한 번만 실행되도록 지정할 수도 있습니다. 예는 다음과 같습니다.

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

참조

• [jQuery .off() 메서드](https://api.jquery.com/off/)
• [jQuery .one() 메서드](https://api.jquery.com/one/)

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