Home >Web Front-end >JS Tutorial >How to Monitor the End of CSS3 Transitions and Animations with jQuery?

How to Monitor the End of CSS3 Transitions and Animations with jQuery?

DDD
DDDOriginal
2024-11-08 02:45:021031browse

How to Monitor the End of CSS3 Transitions and Animations with jQuery?

How to Monitor the Conclusion of CSS3 Transitions and Animations Using jQuery

When fading out an element using opacity transition, it's common to want to remove the element from the DOM upon completion. jQuery simplifies this process by allowing you to specify the removal after animation completion. However, it becomes more challenging when utilizing CSS3 transitions.

Detecting Transition/Animation Ends

To detect the end of a transition via jQuery, you can employ the following:

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

Mozilla provides a detailed reference for this approach: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

For animations, the method is similar:

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

You can specify all browser-prefixed event strings in the bind() method to ensure compatibility.

Single-Execution Event Handling

To ensure the event handler triggers only once, use jQuery's .one() method:

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

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

Bind() Deprecation

jQuery's bind() method is deprecated; use on() instead (as of jQuery 1.7). You can also employ off() on the callback function to enable single firing. Here's an equivalent example using on() and off():

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

References:

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

The above is the detailed content of How to Monitor the End of CSS3 Transitions and Animations with jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn