Callback when CSS3 transition finishes

Question

I d like to fade out an element  transitioning its opacity to 0  and then when finished remove the element from the DOM   In jQuery this is straight forward since you can specify the  Remove  to happen after an animation completes  But if I wish to animate using CSS3 transitions is there anyway to know when the transition animation has completed

User · Answer

The accepted answer currently fires twice for animations in Chrome  Presumably this is because it recognizes webkitAnimationEnd as well as animationEnd  The following will definitely only fires once      From Modernizr    function whichTransitionEvent         var el   document createElement  fakeelement        var transitions              animation   animationend            OAnimation   oAnimationEnd            MSAnimation   MSAnimationEnd            WebkitAnimation   webkitAnimationEnd              for var t in transitions           if  transitions hasOwnProperty t   amp  amp  el style t      undefined                return transitions t                          elementToListenTo        on whichTransitionEvent            function e               console log  Transition complete   This is the callback                   this  off e

User · Answer

There is an animationend Event that can be observed see documentation here   also for css transition animations you could use the transitionend event  There is no need for additional libraries these all work with vanilla JS   x000D   x000D  document getElementById  myDIV   addEventListener  transitionend   myEndFunction   x000D  function myEndFunction     x000D   this innerHTML    transition event ended   x000D    x000D   myDIV  transition  top 2s  position  relative  top  0   x000D  div  background   ede cursor  pointer padding  20px   x000D   lt div id  myDIV  onclick  this style top    55px    gt Click me to start animation  lt  div gt  x000D   x000D   x000D

User · Answer

For anyone that this might be handy for  here is a jQuery dependent function I had success with for applying a CSS animation via a CSS class  then getting a callback from afterwards  It may not work perfectly since I had it being used in a Backbone js App  but maybe useful   var cssAnimate   function cssClass  callback        var self   this          Checks if correct animation has ended     var setAnimationListener   function             self one               webkitAnimationEnd oanimationend msAnimationEnd animationend               function e                    if                      e originalEvent animationName    cssClass  amp  amp                      e target     e currentTarget                                         callback                      else                       setAnimationListener                                                          self addClass cssClass       setAnimationListener        I used it kinda like this  cssAnimate call     something     fadeIn   function         console log  Animation is complete           Remove animation class name        Original idea from http   mikefowler me 2013 11 18 page-transitions-in-backbone   And this seems handy  http   api jqueryui com addClass     Update  After struggling with the above code and other options  I would suggest being very cautious with any listening for CSS animation ends  With multiple animations going on  this can get messy very fast for event listening  I would strongly suggest an animation library like GSAP for every animation  even the small ones

User · Answer

For transitions you can use the following to detect the end of a transition via jQuery       someSelector   bind  transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd   function              Mozilla has an excellent reference   https   developer mozilla org en-US docs Web CSS CSS Transitions Using CSS transitions Detecting the start and completion of a transition  For animations it s very similar       someSelector   bind  animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd   function              Note that you can pass all of the browser prefixed event strings into the bind   method simultaneously to support the event firing on all browsers that support it   Update   Per the comment left by Duck  you use jQuery s  one   method to ensure the handler only fires once  For example       someSelector   one  transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd   function                 someSelector   one  animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd   function              Update 2   jQuery bind   method has been deprecated  and on   method is preferred as of jQuery 1 7  bind    You can also use off   method on the callback function to ensure it will be fired only once  Here is an example which is equivalent to using one   method       someSelector    on  animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd    function e          do something here       this  off e          References     off    one

User · Answer

Another option would be to use the jQuery Transit Framework to handle your CSS3 transitions  The transitions effects perform well on mobile devices and you don t have to add a single line of messy CSS3 transitions in your CSS file in order to do the animation effects   Here is an example that will transition an element s opacity to 0 when you click on it and will be removed once the transition is complete       element   click  function              element   transition   opacity  0    function        this  remove              JS Fiddle Demo

[javascript] Callback when CSS3 transition finishes

Examples related to javascript

Examples related to jquery

Examples related to css