Detecting CSS Animation Completion with JavaScript

Discussion

1. John Reilly

   Hi David,

   Thanks for this post. I was trying Recently to implement a version of jQuery’s fadeIn and fadeOut using CSS animations. I experienced a certain amount of success by animating opacity. However I was stuck when trying to cleanly add and remove the element from the flow of the document. You can see my attempt here:

   http://icanmakethiswork.blogspot.co.uk/2013/12/simple-fading-in-and-out-using-css-transitions.html

   I was wondering if you had any better ideas about how to achieve this?
• Maksim Chemerisuk

  Hi John, take a look how I did it in better-dom – https://github.com/chemerisuk/better-dom/blob/master/src/element.visibility.js. In short I use visibility:hidden + position:absolute to hide and remove element from the flow.

  Demo: http://jsfiddle.net/C3WeM/5/ (a bit outdated but the latest syntax is the same)
• Louis

  I actually dealt with this issue in a post:

  http://www.impressivewebs.com/animate-display-block-none/

  By solution is a bit hacky, but Christian Heilmann also dealt with something similar and I think his solution is good:

  http://christianheilmann.com/2013/09/19/quicky-fading-in-a-newly-created-element-using-css/
2. Sergi

   i use this:

   var standartransitionend = (!!window.webkitURL)?'webkitTransitionEnd':'transitionend';
   

   reasoning here: https://coderwall.com/p/ey5a1w
• Maksim Chemerisuk

  I guess checking window.WebKitAnimationEvent is slightly safer.
• Paul Irish

  Using either of these is fraught with problems. The existence of prefixed URL global (or prefixed keyframe animations) has nothing to do with the existence of prefixed css transitions. These features are turned on, unprefixed, and deprecated separately so you don’t want to assume anything.
3. Jay Merrifield

   One issue I’ve run into a number of times is the realization that like many events in javascript, transition end events bubble! So if you’re animating an 2 elements, one inside the other, the interior element could short circuit the exterior animation. Just to be safe, I also use the propertyName field which specifies which property finished it’s animation so you can make certain if you’re animating 2 properties on the same element you react to the correct transition end event.

   The code looks like this:

   el.addEventListener(transitionEndName, function(){
       if (e.target == el && (!propertyName || e.propertyName === propertyName)) {
           // this is your completion event!
       }
   });
   
4. Mark Elphinstone-Hoadley

   I just use all of the event name options… What’s wrong with that, other than filling up unnecessary object properties?
5. Hakan Yilmaz

   JavaScript does provide us the ability to trigger functionality at the end of <> animations and transitions.

   Change to <>?
6. Hakan Yilmaz

   Sorry. Another try.

   JavaScript does provide us the ability to trigger functionality at the end of **JavaScript”” animations and transitions.

   Change to **CSS**?
7. jacoborus

   Thanks! I used it in my plugin: https://github.com/jacoborus/nanobar
8. Paolo

   in our project we had problems like the Samsung Galaxy S3 Mini stock browser wrongly returning ‘transitionend’ instead of ‘webkitTransitionEnd’, which forced us to resort to something like this: https://gist.github.com/depoulo/9dc8f59d791ec8f8e40c
9. Paolo

   Hm, that Gist link did not work: https://gist.github.com/depoulo/9dc8f59d791ec8f8e40c
10. John Reilly

    Thanks Maksim and Louis – will take a look!
11. Paolo

    That one neither. Next try: https://gist.github.com/depoulo/9dc8f59d791ec8f8e40c
12. jrz

    I believe Microsft never shipped any prefixed versions of this: http://msdn.microsoft.com/en-us/library/ie/hh673535(v=vs.85).aspx#transitions_dom_events

    Do you think it’s safe to remove the MSTransitionEnd bit?
• Brenna

  I just did a little testing on the animationend event and IE browsers that support animations and transitions (IE > 10) don’t require the MS prefix. http://jsfiddle.net/U853f/3/

  Similarly, the latest versions of Firefox and Opera use animationend and webkitAnimationEnd. respectively. I suspect it’s the same for transitionend?
• Brenna

  I just did a little testing on the animationend event and IE browsers that support animations and transitions (IE > 10) don’t require the MS prefix. http://jsfiddle.net/U853f/3/

  Similarly, the latest versions of Firefox and Opera use animationend
  and webkitAnimationEnd, respectively. I suspect it’s the same for
  transitionend ?

  (Reposted for proper formatting.)
13. hamburger

    I’am using this jquery-snipe:

    $('#trigger').on('webkitTransitionEnd moztransitionend transitionend oTransitionEnd', function () {
        $('#debug').html('Animation ended');
    });
    
• rachelslurs

  I love this method. Yes, it uses jQuery, but looks so much more elegant… Thanks!
• Howard

  This is bad, because it actually fires your callback twice in some circumstances. Once for transitionend, and once for the prefixed version. Example, alerts twice:

  $('#trigger').on('webkitTransitionEnd moztransitionend transitionend oTransitionEnd', function () {
      alert('End callback');
  });
14. Matt

    What is the importance of checking for the property name WebkitTransition instead of webkitTransition? I see they both exist, and point to the same string (=== reports true). However, why not just use webkitTransition as the property name?
15. Simone Rescio

    Beware that Webkit has a bug handling transitionEnd event for which if the CSS transitionEnd point would be equivalent to the element current point then the event would not be fired : http://stackoverflow.com/questions/2087510/callback-on-css-transition#answer-11354026

    I usually deal with this by setting a boolean check to be populated by the transitionEnd argument function which if still false, eg no event was fired, lets a setTimeout function do the same stuff
16. Matthew Shields

    I’ve struggled with using transitionEnd detection a couple of times recently – basically due to Chrome firing twice (on both transitionEnd and webkitTransitionEnd) – which was majorly messing it all up.

    In the function to detect which transition event if more that one event is supported would this return only one or both events?
17. Paolo

    In my gist above it returns only the first supported event, due to the $.one() event listener, which clears itself after the first call.
18. Olivier Allouch

    Carefull. It isn’t fired if the Element’s display becomes none.
    Btw, try to wrap the event in a Promise (I called mine addTransitionClass and removeTransitionClass). It’ s fantastic!
19. Patryk

    Be carefull with this. Unfortunately, the event isn’t fired if the browser’s tab isn’t active.

    For example:
    1) launch your page in tab A and switch immediately on the tab B.
    2) transitionend event is fired when you switch back to tab A not when the transition has ended.
20. widheg

    Please confirm that

    e.addEventListener(...)

    should read

    el.addEventListener(...)

    .