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

2020年10月22日

テクノロジー プログラミング

eyecatch CSSを極限まで極めたいと考えている、ユゲタです。 cssで2秒ぐらいのアニメーションをセットして、それが完了したらjavascriptで操作をするというようなケースの場合、 durationでセットしている時間をjavascriptでsetTimeoutで処理してもいいんですが、どうしても多少の時間誤差が発生して、気になってしまう。 cssアニメが終了したという時のイベントがjavascriptに存在しないかな〜と思って探してみたら、あっさりとanimationendというイベントが存在することがわかりました。

animationend

実はこの機能は、firefoxでは使えないっぽく見えますが、FireFoxver51では動作することが確認されているらしいので、安心して使えるようだ。 でも、便利なので知っておくと色々と使えるかも・・・・ ということで使い方ですが、 element.onanimationend = function(e){ var animation_element = e.target; animation_element.style.setProperty("display","none",""); }; こんな感じで、ちゃんとエレメントの取得もtargetで正常にできる。  

transitionend

ちなみに、キーフレームアニメーションではなく、transitionでセットされているcssアニメの場合は、"transitionend"というイベントが用意されている。 なんと、こちらは、どのブラウザでもいけるっぽい。ありがたや!! element.ontransitionend = function(e){ var animation_element = e.target; animation_element.style.setProperty("display","none",""); }; 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システムは作れないかもしれませんね。 安定したシステム構築の為に必要な知識でした。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。