Javascriptでcssをコントロールするのは、これまで
Element.style.setProperty(
'transform',
'translateX(100px)',
'important'
)
という風にやっていたんですが、どうやらanimate()関数が便利に使えるかもと思って試してみたら、案の定メチャクチャ便利だったことに今更ながら気がついてしまった。
animate機能について
参考 :
MDN web docs - Element.animate()
構文 : animate(keyframes, options)
Ex :
document.getElementById("tunnel").animate([
// keyframes
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
], {
// timing options
duration: 1000,
iterations: Infinity
});
keyframesは、cssの@keyframesと同じ様な書き方をして、optionsには、durationやら、cssのanimation設定がそのまま使えそうです。
animateのfinishedをイベント取得するには？
animateの終了を非同期で取得できます。
animate()設定をした直後に、次のコードを書くことで、イベント取得ができました。
Promise.all(Element.getAnimations().map((animation) => animation.finished)).then(()=>{...finishedの後の処理を記述...})
animation.finishedの箇所を他のプロパティをキャッチすれば、色々なイベントが取得できるので、用途に応じて便利に使えそう。
用途ポイント
スクロールイベントに応じた、エレメントの表示や非表示などのアニメーション処理を、属性付与形式でやってもいいけど、Javascriptのみの記載でできるなら、HTMLの属性がスッキリできそうです。
他にも、モーダルウィンドウの表示時などで、印象良くスクロールインさせることができるし、
JavascriptでElement追加したような場合に、ちょっとしたアニメーション処理をわざわざcssを書かなくても出来るようになるのは、まあまあうれしいかも。
仕事でwebサイトやシステムを構築していくうちに、凡例がたくさんできそうですね。
codepenででも、スニペットを貯めていくと便利に使えるかもです。
（ブログで書き溜めていきたいと思います）
使用できるブラウザ調査
参考 :
Can I Use - Element API: animate
IEは、未対応ですが、もはやこの表に乗せなくてもいいかもですよね・・・？？？
まだ使ってる人います？
あとがき
callbackまで、一括でセットできたらとてもきれいなコードが作れるのに・・・と思ったけど、贅沢は言ってらんない。
恐らくanimate()関数内でcssをゴリゴリに処理していると思われるが、これまでのsetPropertyでの記述と比べたら遥かにスマートに書けるし、動きも問題がなくスムーズなのでこの機能を知らなかった自分に
喝！
今後、この機能使い倒そうと思っているので、callbackまで一括書けるように、hackして独自関数にしておいてもいいかも・・・・とか考えてしまいました。
