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

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

웹 개발에서는 CSS 전환 또는 CSS 전환 후에 작업을 수행하는 것이 바람직한 경우가 많습니다. 애니메이션이 완료되었습니다. 그러나 이러한 애니메이션의 정확한 끝을 결정하는 것은 까다로울 수 있습니다. 이 기사에서는 jQuery를 사용하여 전환과 애니메이션의 완료를 감지하고 DOM 조작을 정확하게 제어하는 ​​방법을 보여줍니다.

전환

전환의 끝을 감지하려면 jQuery를 통한 CSS 전환은 다음 구문을 활용합니다.

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

이는 다음 중 하나가 발생할 때 트리거되는 지정된 요소에 이벤트 핸들러를 바인딩합니다. 지원되는 전환 종료 이벤트가 발생합니다.

애니메이션

CSS 애니메이션의 경우 유사한 접근 방식이 사용됩니다.

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

하나- 보장 Time Firing

이벤트 핸들러가 여러 번 실행되는 것을 방지하려면 다음을 사용하세요. jQuery의 .one() 메소드. 이렇게 하면 핸들러가 한 번만 실행되고 그 후에는 자동으로 제거됩니다.

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

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

jQuery 메서드 지원 중단

.bind() 메서드는 더 이상 사용되지 않습니다. jQuery 1.7에서. 대신 .on()을 사용하세요:

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

이 동등한 코드는 .off()를 사용하여 .one()의 동작을 효과적으로 모방합니다.

참조:

• [jQuery 끄기 함수](https://api.jquery.com/off/)
• [jQuery One 함수](https://api.jquery.com/one/)

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