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;
    };
}());