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

CSS3 전환 활용: jQuery로 완료 감지

CSS3 전환을 사용하여 요소에 애니메이션을 적용할 때 전환이 끝나는 정확한 순간을 알아야 합니다. 후속 작업을 수행합니다. jQuery 애니메이션과 달리 CSS3 전환에는 완료 콜백이 내장되어 있지 않습니다.

전환 종료 이벤트 캡처

전환의 끝을 감지하기 위해 jQuery는 다음을 제공합니다. 스크립트:

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

애니메이션의 경우 유사한 접근 방식을 사용할 수 있습니다.

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

접두사가 붙은 모든 이벤트 문자열을 전달하면 이 스크립트가 여러 브라우저에서 작동합니다.

단일 실행을 위해 .one() 사용

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

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

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

지원 중단 및 최신 접근 방식

jQuery의 .bind() 메서드는 이제 더 이상 사용되지 않습니다. 선호되는 접근 방식은 .off()와 함께 작동하는 .on()입니다. 예는 다음과 같습니다.

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

이 접근 방식을 사용하면 콜백 함수가 한 번만 실행됩니다.

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