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!