Skip to content

Instantly share code, notes, and snippets.

@z2015
Last active May 30, 2016 06:28
Show Gist options
  • Save z2015/32a4efee46d5d57cd6b2ccbeb426f1bd to your computer and use it in GitHub Desktop.
Save z2015/32a4efee46d5d57cd6b2ccbeb426f1bd to your computer and use it in GitHub Desktop.
Detecting CSS Animation Completion with JavaScript
/* From Modernizr */
function whichTransitionEvent(){
var t;
var 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];
}
}
}
/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
console.log('Transition complete! This is the callback, no library needed!');
});
/*
The "whichTransitionEvent" can be swapped for "animation" instead of "transition" texts, as can the usage :)
*/
https://davidwalsh.name/css-animation-callback
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment