2015/07/02

[CSS][JavaScript][jQuery]CSSアニメーションのコールバックを受け取る

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 コメント:

コメントを投稿