How do I detect a transition end without a JavaScript library?

Question

I'd like to delete an object after it's done animating with a CSS transition, but I'm not able to use a JavaScript library.

How do I detect when the animation is done? Do I use a callback or custom event somehow?

Answer 1

element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

For now, the exact event name has not been standardized. Here's a quote from MDN :

There is a single event that is fired when transitions complete.
In all standard-compliant browser, the event is transitionend ,
in WebKit it is webkitTransitionEnd .

Here's the fiddle for Webkit: http://jsfiddle.net/bNgWY/

Answer 2

As I'm currently doing the exact same thing I'll share a useful, cross-browser implementation from a Marakana tutorial.

   // First, we store the names of the event according to the browsers
            
   var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];

            //For each of them...
            for (var i in navigatorsProperties) {
                //We attach it to our overlay div
                el.addEventListener(navigatorsProperties[i],function()
                {
                    // Here's the code we want to fire at transition End
                      console.log('transition end');

                },false);
            }

It's to be noted that IE10 supports transitions with transitionend (see MSDN ).

IE9 and below do not support transitions (see caniuse.com ) so you won't be able to attach any eventListener to a transition end ( so don't try msTransitionend or whatever for those browsers).

EDIT: While reading Modernizr documentation on Github I stumbled on their cross-browser polyfills page. Among many other useful links I found this small but extremely good transitionend script .

Mind that the examples in the Github README.md use jQuery but the library indeed requires no libraries and no dependencies as it's written in vanilla javascript.

Answer 3

I was unable to find a suitable 'transitionend' polyfill that met my requirements. So if you want something for hooking the transition end once, use this:

(function() {
    var i,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    var transitionEnd = '';
    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            transitionEnd = transitions[i];
            break;
        }
    }

    Object.prototype.onTransitionEndOnce = function(callback) {
        if (transitionEnd === '') {
            callback();
            return this;
        }
        var transitionEndWrap = function(e) {
            callback(); 
            e.target.removeEventListener(e.type, transitionEndWrap);
        };
        this.addEventListener(transitionEnd, transitionEndWrap);
        return this;
    };
}());