[CSS] CSS3のTransition終了時にJavaScriptで処理を行う方法

こんにちは、@yoheiMuneです。
今日は、CSS3のTransitionで背景色やpositionなどを変化させた後に、JavaScriptの処理を行う方法をブログに書きたいと思います。

CSS3のTransitionについて

CSS3 Transitionは、CSS3 Animationと並んで、Webに動きをつけることのできるCSSのひとつです。
スゴく簡単な設定で、楽しく動きます。詳細は、以下をご覧頂けると幸いです。

- [HTML5] CSS3のTransitionsでJavaScriptなしにHTMLに動きを@YoheiM.NET

Transition終了をJavaScriptで検知する

Transition終了時を表す「webkitTransitionEnd」イベントを補足する事で、 Transition終了時にJavaScriptを実行することが出来ます。 例えば、id=box010のElementのTransition終了時を、以下のようにJavaScriptで補足できます。

var box = document.getElementById("box010");
box.addEventListener("webkitTransitionEnd", function(event){
     alert("transition end.");
}, false);

webkitTransitionEndイベントで注意すべき点

ここで注意すべき点があります。 それはTransitionで変化させたプロパティの数だけ、上記のコールバック関数が呼ばれるという点です。
例えばbackground-colorとborder-colorの2つを変化させた場合は、２回呼び出されます。

そのため、どのプロパティの変化終了なのかを知る必要がある場合には、コールバック関数の引数（上記だとevent） の内容で判断する必要があります。
webkitTransitionEndイベントのコールバック関数の引数（event）には、以下の内容が含まれています。

propertyName	background-colorなどの変化したプロパティが格納されている。
elapsedTime	変化時間。これはdelayの影響は受けない秒数が入っている。

また、borderなど纏めたCSSをTransitionで変化させた場合、上下左右それぞれの変化終了時に、 コールバック関数が呼ばれるようです。

参考資料

webkitTransitionEndイベントの詳細は、以下をご参照ください。
- http://www.w3.org/TR/css3-transitions/#transition-events
- http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitTransitionEventClassReference/WebKitTransitionEvent/WebKitTransitionEvent.html

最後に

CSSとJavaScriptが連携できるようになると便利で良いですね。
多くのブラウザでは、TransitionやAnimationはGPUで動作するようになってきたので、JSでアニメーションを 擬似的に表現するよりもかなり滑らかに動きます（Androidは除く）。

動きの部分をTransitionやAnimationでバリバリと実装しつつ、JSで足りないところを保管する実装が 自由にできるようになれたらいいなぁと思う今日この頃です。

本日も最後までご覧頂きましてありがとうございました！！