jQuery를 사용하여 CSS3 전환 및 애니메이션의 끝을 모니터링하는 방법은 무엇입니까?

jQuery를 사용하여 CSS3 전환 및 애니메이션의 결론을 모니터링하는 방법

불투명 전환을 사용하여 요소를 페이드 아웃할 때 다음을 원하는 것이 일반적입니다. 완료되면 DOM에서 요소를 제거합니다. jQuery는 애니메이션 완료 후 제거를 지정할 수 있도록 하여 이 프로세스를 단순화합니다. 그러나 CSS3 전환을 활용하면 더욱 어려워집니다.

전환/애니메이션 종료 감지

jQuery를 통해 전환의 끝을 감지하려면 다음을 사용할 수 있습니다.

$("#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(){ ... });

Bind() 지원 중단

jQuery의 바인딩() 메서드는 더 이상 사용되지 않습니다. 대신 on()을 사용하세요(jQuery 1.7 기준). 콜백 함수에 off()를 사용하여 단일 실행을 활성화할 수도 있습니다. 다음은 on() 및 off()를 사용하는 동등한 예입니다.

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

참조:

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

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