category: css3

JavaScript - detect CSS3 transitionEnd

on 2014-12-30

JavaScript - Detect CSS3 transitionEnd

transitionend

It is a event can fired when CSS3 transition end.

function transitionEnd() {
    var el = document.createElement('div'), //what the hack is bootstrap
        transEndEventNames = {
        WebkitTransition : 'webkitTransitionEnd',
        MozTransition    : 'transitionend',
        OTransition      : 'oTransitionEnd otransitionend',
        transition       : 'transitionend'
    };

    for (var name in transEndEventNames) {
        if (el.style[name] !== undefined) {
            return transEndEventNames[name];
        }
    }

    return false; // explicit for ie8 (  ._.)
}

// Usage
document.querySelector('body').addEventListener(transitionEnd(), function () {
// dosomething
});

Refer - Easy way to detect support for transitionend event without frameworks like jQuery or Modernizr?

Read more