PHPSPOTの
CSSアニメーションの終了をJSで検知してコールバックを実行できるJS
で紹介されていた、
Detecting CSS Animation and Transition End with JavaScript
で確認すると、以下のCSS3のアニメーションコードでコールバックが発生しないケースがあると書いてありました。
$( '.item' ).addClass( 'disappear' ).on( 'webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function(){ $( this ).remove(); });で、それに対して、
$( '.item' ).addClass( 'disappear' ).onCSSAnimationEnd( function(){ $( this ).remove(); });と
var item = document.querySelector( '.item' ); item.classList.add( 'disappear' ); item.onCSSAnimationEnd( function(){ item.parentNode.removeChild( item ); });と2ケース紹介されていて、どうやら、下記のコードをインクルードする必要があるみたいです。
/* 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 ));
/* By Osvaldas Valutis, www.osvaldas.info Available for use under the MIT License */ ;( function( $, window, document, undefined ) { 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-'; $.fn.extend( { onCSSAnimationEnd: function( callback ) { var $this = $( this ).eq( 0 ); $this.one( 'webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', callback ); if( ( prefixAnimation == '' && !( 'animation' in s ) ) || $this.css( prefixAnimation + 'animation-duration' ) == '0s' ) callback(); return this; }, onCSSTransitionEnd: function( callback ) { var $this = $( this ).eq( 0 ); $this.one( 'webkitTransitionEnd mozTransitionEnd oTransitionEnd otransitionend transitionend', callback ); if( ( prefixTransition == '' && !( 'transition' in s ) ) || $this.css( prefixTransition + 'transition-duration' ) == '0s' ) callback(); return this; } }); })( jQuery, window, document );これ、素朴な提案なのだが、githubにアップしてくれないだろうか?
0 コメント:
コメントを投稿