8th713 Log

CSS3 の Transition を JavaScript と連携させるときのメモ

はじめに

今回は Google Chrome と Safari に限った話。他のブラウザはしりません。検証に使ったバージョンは win 版の

• Google Chrome 6.0.495.0(Official Build 56152) dev
• Safari 5.0.1(7533.17.8)

です。また CSS のプロパティに関してはベンダープレフィックスは記事上では省いていますが実際のCSSではちゃんとプレフィックス付きで書いています。

サンプル

Transition and webkitTransitionEnd Event - jsdo.it - share JavaScript, HTML5 and CSS

Transition

hover 擬似要素や JavaScript からのインラインスタイル変化などが起きたときその変化をアニメーションで表現する仕組みです。

サンプルコードではクリックしたときクラスを付けたり外したりして適用されるスタイルを変化させています。sample1 は width が 100px から 200px へ 2秒かけて変化します。sample2 は width を指定していないインラインブロック要素です。この場合アニメーションは width が 0px の状態からスタートすることに注意してください。

webkitTransitionEnd イベント

「変化するプロパティが変化後として指定した値になる」と webkitTransitionEnd というイベントが呼ばれます。

webkitTransitionEnd イベントのイベントオブジェクトには propertyName と elapsedTime というプロパティがあります。propertyName は変更があった CSS プロパティの名前、elapsedTime はアニメーションの経過時間です。transition-delay プロパティの値は elapsedTime に影響を与えません。sample2 では1秒のディレイが設定されていますが elapsedTime は2のままです。

一度のアニメーションで複数のプロパティが変化する場合、変化したプロパティの数だけイベントが実行されます。なのでアニメーション終了のコールバックをうけて何か処理をする場合は propertyName で処理をわけたほうがいいと思います。sample3 では width と共に height も変化する為イベントが2回呼び出されています。sample2 の transited クラスには height が指定してありますが元との height と変化がないためイベントは一度しか呼ばれません。

webkitTransitionEnd はアニメーションが途中でキャンセルされた場合呼ばれません。サンプルコードでは width が 100px の時クリックでアニメーションをスタートさせ終了前にもう一度クリックするとイベントが呼ばれません。「アニメーションが終了した時」に実行ではなく「変化するプロパティが変化後として指定した値になる」と実行なので width が 200px にならないと呼ばれないのです。ただし width が 100px に戻った瞬間にはイベントが呼ばれます。