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
Release: 2024-11-08 02:45:02
Original
1030 people have browsed it

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(){ ... });
Copy after login

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(){ ... });
Copy after login

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(){ ... });
Copy after login

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);
 });
Copy after login

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!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template