Created
June 29, 2015 08:48
-
-
Save Loac-fr/8ed5c54af3f0c3284ffe to your computer and use it in GitHub Desktop.
detect + callback on css animation end
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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