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

jQuery를 사용하여 CSS3 전환 및 애니메이션의 종료 감지

CSS 전환 및 애니메이션 완료 시 작업 실행은 웹 개발 중에 자주 발생합니다. . jQuery로 이를 달성하려면 두 애니메이션 유형에 대해 서로 다른 접근 방식을 사용해야 합니다.

전환 처리:

전환의 경우 jQuery는 결론을 감지하는 편리한 리스너를 제공합니다. 전환:

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

처리 애니메이션:

마찬가지로 애니메이션의 경우 유사한 리스너가 존재합니다.

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

호환되는 모든 브라우저를 지원하기 위해 브라우저 접두사가 붙은 모든 이벤트 문자열을 바인드()에 전달할 수 있습니다. 방법을 동시에 제공합니다.

일회성 이벤트 실행:

핸들러가 한 번만 실행되도록 하기 위해 Duck은 jQuery의 .one() 메서드를 사용할 것을 제안합니다.

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

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

최신 jQuery 이벤트 사용:

bind()는 jQuery 1.7에서 더 이상 사용되지 않는다는 점에 유의하는 것이 중요합니다. 선호되는 방법은 on()이며, 콜백 함수가 한 번만 실행되도록 하려면 off()를 사용하세요.

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

이러한 방법을 이해하면 개발자는 CSS3 전환 및 애니메이션이 완료될 때 작업을 효과적으로 실행할 수 있습니다. 보다 반응성이 뛰어나고 몰입도 높은 웹 경험을 제공합니다.

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