Skip to content

Instantly share code, notes, and snippets.

@hsnaydd
Created June 29, 2015 12:10
Show Gist options
  • Save hsnaydd/0a98b04a31e58ab93aa3 to your computer and use it in GitHub Desktop.
Save hsnaydd/0a98b04a31e58ab93aa3 to your computer and use it in GitHub Desktop.
Detecting CSS Animation and Transition End with JavaScript
/*
By Osvaldas Valutis, www.osvaldas.info
Available for use under the MIT License
*/
;( function ( document, window, index ){
var s = document.body || document.documentElement, s = s.style, prefixAnimation = '', prefixTransition = '';
if( s.WebkitAnimation == '' ) prefixAnimation = '-webkit-';
if( s.MozAnimation == '' ) prefixAnimation = '-moz-';
if( s.OAnimation == '' ) prefixAnimation = '-o-';
if( s.WebkitTransition == '' ) prefixTransition = '-webkit-';
if( s.MozTransition == '' ) prefixTransition = '-moz-';
if( s.OTransition == '' ) prefixTransition = '-o-';
Object.prototype.onCSSAnimationEnd = function( callback ){
var runOnce = function( e ){ callback(); e.target.removeEventListener( e.type, runOnce ); };
this.addEventListener( 'webkitAnimationEnd', runOnce );
this.addEventListener( 'mozAnimationEnd', runOnce );
this.addEventListener( 'oAnimationEnd', runOnce );
this.addEventListener( 'oanimationend', runOnce );
this.addEventListener( 'animationend', runOnce );
if( ( prefixAnimation == '' && !( 'animation' in s ) ) || getComputedStyle( this )[ prefixAnimation + 'animation-duration' ] == '0s' ) callback();
return this;
};
Object.prototype.onCSSTransitionEnd = function( callback ) {
var runOnce = function( e ){ callback(); e.target.removeEventListener( e.type, runOnce ); };
this.addEventListener( 'webkitTransitionEnd', runOnce );
this.addEventListener( 'mozTransitionEnd', runOnce );
this.addEventListener( 'oTransitionEnd', runOnce );
this.addEventListener( 'transitionend', runOnce );
this.addEventListener( 'transitionend', runOnce );
if( ( prefixTransition == '' && !( 'transition' in s ) ) || getComputedStyle( this )[ prefixAnimation + 'transition-duration' ] == '0s' ) callback();
return this;
};
}( document, window, 0 ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment