• HOME
  • BLOG
  • HTML5
  • Transit 0.9.9 (jQuery Plug-in) 古いブラウザで、delay が効かないね

Transit 0.9.9 (jQuery Plug-in) 古いブラウザで、delay が効かないね

CSS3なアニメーション 簡単に扱えるようにしてくれる jQuery Plug-in Transit。
Fallback to frame-based animation 設定である、
$.fn.transition = $.fn.animate;
した際に delay が効かないのでその対応について。

Transit を古いブラウザでも動かすには、ということでサイトにはこのように書かれています。

// Delegate .transition() calls to .animate()
// if the browser can’t do CSS transitions.
if (!$.support.transition)
$.fn.transition = $.fn.animate;

このように書いておくと、フレームアニメーションでアニメーションしてくれ、古いブラウザでも動かすことができるようになるのですが、その場合の話です(対象はたとえばIE9など)。

.transition() での delay 指定って、アニメーション設定オブジェクトに delay プロパティとして渡す仕様なのだけど、
$.fn.transition = $.fn.animate; した場合、delay 設定は現状、完全無視されちゃうみたいです。

なので、 transition() をオーバーライドして、delay 指定がある場合は delay() を挟み込んであげることで対応してみます。

if (!$.support.transition){
	$.fn.transition = $.fn.animate;

	//delay対応
	var originalTransitionMethod = $.fn.transition;
	$.fn.transition = function(){
		if(arguments[0].delay){
			this.delay(arguments[0].delay);
		}
		return originalTransitionMethod.apply( this, arguments );
	};
}

※必ず if (!$.support.transition) ケース内に書きます。

Githubのほうにリクエストすればいいのですが、レガシーな部分のお話なのと英語が苦手なのでとりあえず個人的に対応です。。