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システムは作れないかもしれませんね。
安定したシステム構築の為に必要な知識でした。
0 件のコメント:
コメントを投稿