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

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

CSS3을 사용하여 요소를 전환하면 기존 JavaScript 기술보다 더 부드러운 애니메이션을 제공합니다. 그러나 CSS3 애니메이션으로 작업할 때 다음과 같은 질문이 생깁니다. 전환이 완료된 시점을 어떻게 확인할 수 있습니까?

jQuery는 이러한 요구에 대한 솔루션을 제공합니다. CSS3 전환의 끝을 모니터링하려면 다음 구문을 사용하여 이벤트 핸들러를 바인딩할 수 있습니다.

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

마찬가지로 CSS3 애니메이션의 경우 다음을 사용할 수 있습니다.

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

제공하여 바인딩() 메소드에서 브라우저 접두사가 붙은 모든 이벤트 문자열을 사용하면 브라우저 간 호환성이 보장됩니다.

핸들러의 단일 실행 보장

처리기를 사용하려면 jQuery의 .one() 메서드를 사용할 수 있습니다. 예를 들어:

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

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

.bind() 메서드의 사용 중단

jQuery의 바인딩() 메서드는 .on()을 위해 더 이상 사용되지 않습니다. 따라서 다음을 사용해야 합니다.

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

이 방법을 사용하면 핸들러가 한 번만 실행됩니다.

자세한 내용은 다음 참고 자료를 참조하세요.

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

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