How Can I Detect the Completion of CSS3 Transitions and Animations in jQuery?

Detecting the Completion of CSS3 Transitions and Animations

When working with CSS3 animations or transitions, a common challenge arises: determining when the animations or transitions have finished. This knowledge is crucial for performing subsequent actions, such as removing elements from the DOM.

In jQuery, you have the option to specify "Remove" to occur after an animation completes. However, for CSS3 transitions or animations, there is a specific way to detect their endpoint.

Transitions

For transitions, jQuery provides a method to listen for the end of a transition:

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

Animations

Similarly, for animations, you can use:

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

Note that you can pass all browser-prefixed event strings into the bind() method to ensure the event is supported across multiple browsers.

One-Time Event Handling

To ensure the event handler is triggered only once, you can use jQuery's one() method:

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

Deprecated Methods

Currently, jQuery's bind() method is deprecated, and on() is preferred. You can also use off() on the callback function to specify that it should be fired only once. Here's an example:

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

References

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

The above is the detailed content of How Can I Detect the Completion of CSS3 Transitions and Animations in jQuery?. For more information, please follow other related articles on the PHP Chinese website!