Bootstrap transition.jsの使い方

Bootstrap / Bootstrap/GitHub

CSS3 TransitionのコールバックをJavaScriptで検知して処理する方法は、webkitTransitionEndイベントにバインドすれば実現できます。

CSS3 Transition

#hoge {
	...
	opacity: 1;
	filter: alpha(opacity=100);
		
	-webkit-transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	transition: opacity 1s linear;
}
#hoge.fade {
	opacity: 0;
	filter: alpha(opacity=0);
}

JavaScript

document.getElementById("hoge").addEventListener("webkitTransitionEnd", function(e){
	console.log("end.");
});
document.getElementById("trigger").addEventListener("click", function(e){
	document.getElementById("hoge").className = "fade";
});

> サンプル1

というのを、Bootstrapのtransition.jsを使うと簡単に、そしてより便利に実装できます。

bootstrap-transition.js

※通常のBootstrapをダウンロードした場合はbootstrap.js、GitHub版をダウンロードした場合はbootstrap-transition.jsです。

...
  $(function () {

    $.support.transition = (function () {

      var transitionEnd = (function () {

        var el = document.createElement('bootstrap')
          , transEndEventNames = {
               'WebkitTransition' : 'webkitTransitionEnd'
            ,  'MozTransition'    : 'transitionend'
            ,  'OTransition'      : 'oTransitionEnd otransitionend'
            ,  'transition'       : 'transitionend'
            }
          , name

        for (name in transEndEventNames){
          if (el.style[name] !== undefined) {
            return transEndEventNames[name]
          }
        }

      }())

      return transitionEnd && {
        end: transitionEnd
      }

    })()

  })
...

JavaScript

※BootstrapのJavaScriptコンポーネントはjQuery依存なので、事前に読み込んでおく必要があります。

ということなので、jQueryのメソッドを使って記述してみます。

$(function(){
	$("#trigger").on("click", function(){
		$element = $("#hoge");
		$element.addClass("fade");
		var transition = $.support.transition && $element.hasClass("fade");
		if (transition) {
			$element.on($.support.transition.end, function (e) {
				console.log("end.");
			})
		}
	})
});

> サンプル2

という具合。

Transitionのプロパティが複数ある場合

opacityに加えて、Transitionプロパティにwidthも設定してみます。

#hoge {
	width: 100px;
	height: 100px;
	background-color: black;
	
	opacity: 1;
	filter: alpha(opacity=100);
	
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}
#hoge.fade {
	width: 10px;
	
	opacity: 0;
	filter: alpha(opacity=0);
}

これを先ほどのJSで実行させると、webkitTransitionEndイベントが2回呼び出されます。
コンソールが2回出力されます。これはあまりよろしくありません。

解決策のひとつは、コールバック関数の引数（e）に含まれるpropertyName（プロパティ名）で条件分岐する方法。

...
if (e.originalEvent.propertyName == "width")
...

ただ、これだと処理が複雑になると大変そう。

ここでCSSのクラス定義について基本を見直します。

という、Bootstrapでも採用されている考え方に則ると、fadeクラスはあくまでもopacity=0の状態を定義したクラスであり、width=10pxという状態の定義が必要ならば、それはまた別のクラスを定義するのがナイスな設計と言えますね。