2012/08/14更新

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

このエントリーをはてなブックマークに追加            

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

Cache Transition End Using 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つを変化させた場合は、2回呼び出されます。

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

propertyNamebackground-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で足りないところを保管する実装が 自由にできるようになれたらいいなぁと思う今日この頃です。

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。