CSSのアニメーションに関するイベントをjavascriptで取得する方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

CSSを極限まで極めたいと考えている、下駄です。
 

cssで2秒ぐらいのアニメーションをセットして、それが完了したらjavascriptで操作をするというようなケースの場合、
 

durationでセットしている時間をjavascriptでsetTimeoutで処理してもいいんですが、どうしても多少の時間誤差が発生して、気になってしまう。
 

cssアニメが終了したという時のイベントがjavascriptに存在しないかな〜と思って探してみたら、あっさりとanimationendというイベントが存在することがわかりました。
 

animationend


 

実はこの機能は、firefoxでは使えないっぽく見えますが、FFver51では動作することが確認されているらしいので、安心して使えるようだ。
&nbps;

でも、便利なので知っておくと色々と使えるかも・・・・
 

ということで使い方ですが、
 

 

こんな感じで、ちゃんとエレメントの取得もtargetで正常にできる。
 

transitionend

ちなみに、キーフレームアニメーションではなく、transitionでセットされているcssアニメの場合は、”transitionend”というイベントが用意されている。
 


 

なんと、こちらは、どのブラウザでもいけるっぽい。ありがたや!!
 

 

animationendとtransitionend、似た感じで覚えられるので、セットで覚えておきましょう!

他にもあるよ、アニメ系イベント

animationstart
cssアニメーションの開始イベントが取得できます。
 

animationiteration
アニメーションが反復する時に、次のアニメが始まった時のイベントが取得できます。
 

animationcancel
アニメーションが予期せずに終了してしまった時のイベントを取得できますが、何故かこの機能だけFirefoxでしか使えないらしい。
覚えておく価値はないでしょう。
 

transition
cssのtransitionアニメーションの開始イベントが取得できます。
ちなみに、delayがセットされている場合は、delay前になります。
 

transitionrun
startと似ている感じがしますが、delayセットされている時にdelay後にイベント発動します。
 

transitioncancel
transitionがキャンセルしてしまった時のイベントを取得できますが、animationと違い、IE以外のブラウザはすべて使えるようです。
 

cssアニメとjsの連動について

面倒くさいからcssアニメーションは使わずに、javascriptだけでstyleコントロールすればいいかと考える人もいるかもしれませんが、
 

ブラウザのレンダリングにおいては、cssアニメは今の所最強です。
 

javascriptのカクカクモーションが気になることはもちろんですが、cssのレンダリングの方がはるかに性能が良いことが実際にやってみるとわかります。
 

うまく連携することで、かなりハイクオリティなことができることは容易に想像できるでしょう。
 

もはや、そうした連携設計も柔軟にできないと、いい感じのwebシステムは作れないかもしれませんね。
 

安定したシステム構築の為に必要な知識でした。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です