Skip to content

Instantly share code, notes, and snippets.

@Loac-fr
Created June 29, 2015 08:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Loac-fr/8ed5c54af3f0c3284ffe to your computer and use it in GitHub Desktop.
Save Loac-fr/8ed5c54af3f0c3284ffe to your computer and use it in GitHub Desktop.
detect + callback on css animation end
/*
By Osvaldas Valutis, www.osvaldas.info
Available for use under the MIT License
@example :
var item = document.querySelector( '.item' );
item.classList.add( 'disappear' );
item.onCSSAnimationEnd( function()
{
item.parentNode.removeChild( item );
});
see jquery version here :
@source http://osvaldas.info/detecting-css-animation-transition-end-with-javascript
*/
;( 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