On Animation or Transition end

README.md

Detect transition or Animation end

Lots of cool talk. By https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/

animation-end.js

function whichAnimationEvent(){
    var t,
        el = document.createElement("fakeelement");
    
    var animations = {
        "animation"      : "animationend",
        "OAnimation"     : "oAnimationEnd",
        "MozAnimation"   : "animationend",
        "WebkitAnimation": "webkitAnimationEnd"
    }
    
    for (t in animations){
        if (el.style[t] !== undefined){
            return animations[t];
        }
    }
}

var animationEvent = whichAnimationEvent();

// Test for animation end
$('.element').one(animationEvent, function(event) {
    console.log('animation has ended');
});

transition-end.js

function whichTransitionEvent(){
    var t,
        el = document.createElement("fakeelement");
    
    var transitions = {
        "transition"      : "transitionend",
        "OTransition"     : "oTransitionEnd",
        "MozTransition"   : "transitionend",
        "WebkitTransition": "webkitTransitionEnd"
    }
    
    for (t in transitions){
        if (el.style[t] !== undefined){
            return transitions[t];
        }
    }
}

var transitionEvent = whichTransitionEvent();

// Test for transition end
$('.element').one(transitionEvent, function(event) {
    console.log('transition has ended');
});