jQuery에서 CSS3 전환 및 애니메이션의 끝을 감지하는 방법은 무엇입니까?

jQuery에서 CSS3 전환 및 애니메이션 완료 모니터링

웹 개발에서는 요소를 페이드 아웃한 다음 요소를 제거하는 것이 바람직한 경우가 많습니다. 애니메이션 완료 시 DOM. 이는 jQuery의 애니메이션 기능을 사용하면 간단하지만 이를 CSS3 전환으로 확장하려면 결론을 감지하는 메커니즘이 필요합니다.

다행히 jQuery는 이 문제를 해결할 수 있는 방법을 제공합니다.

전환

jQuery를 통해 CSS 전환의 끝을 감지하려면 다음 이벤트 바인더를 활용하세요.

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

Mozilla는 https://developer.mozilla.org/en에서 이에 대해 자세히 설명합니다. -US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

애니메이션

애니메이션의 경우 접근 방식이 비슷합니다.

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

주목해야 할 중요한 점은 브라우저에 접두사가 붙은 모든 이벤트 문자열과 함께 바인딩() 메서드를 동시에 사용하면 이 기능이 있는 모든 브라우저에 대한 지원을 보장할 수 있다는 것입니다.

이벤트 처리 최적화

핸들러 실행을 단일 발생으로 제한하려면 다음과 같이 jQuery의 .one() 메서드를 사용하세요.

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

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

메서드 지원 중단 및 최신 대안

jQuery의 바인딩() 메서드는 jQuery 1.7부터 더 이상 사용되지 않고 on() 메서드를 선호한다는 점을 인정할 가치가 있습니다. 또한 다음 예제에서 설명한 것처럼 콜백 함수 내에서 off() 메서드를 활용하여 일회성 실행을 보장할 수 있습니다.

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

이 접근 방식은 one() 메서드를 사용하는 것과 동일한 효과가 있습니다. .

추가 리소스

• [.off()](https://api.jquery.com/off/)
• [.one()](https://api.jquery.com/one/)

위 내용은 jQuery에서 CSS3 전환 및 애니메이션의 끝을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!