JavaScriptでCSSアニメーションを自在に操る方法
ウェブ上のアニメーションにおいて、開発者は適切なテクノロジー、すなわちCSSまたはJavaScriptでアニメーションの要件を測定する必要があります。
ウェブデザイナーの中には、CSSでのアニメーションがJavaScriptでのアニメーションよりも難しいと考える人がいます。CSSアニメーションにはいくつかの制限がありますが、ほとんどの場合、私たちが思っている以上に高機能です！言うまでもなく、パフォーマンスも通常は優れています。
早速始めましょう！
JavaScriptのタッチと組み合わせることで、CSSアニメーションとトランジションは、ほとんどのJavaScriptライブラリよりも効率的にハードウェアアクセラレーションされたアニメーションとインタラクションを実現できます。 早速始めましょう！
CSSトランジションの操作
コーディングフォーラムでは、要素のトランジションのトリガーや一時停止に関する無数の質問があります。JavaScriptを使えば、その解決策は非常にシンプルです。
要素のトランジションをトリガーするには、それをトリガーするクラス名をその要素にトグルします。
要素のトランジションを一時停止するには、getComputedStyleとgetPropertyValueを使用して、一時停止したいトランジションのポイントで値を取得します。次に、その要素のCSSプロパティを、取得した値と等しく設定します。
CSS「コールバック関数」の活用
CSSトランジションやアニメーションを操作する上で非常に役立つ、あまり知られていないJavaScriptのトリックの1つは、それらが発火するDOMイベントです。例えば、アニメーションの場合はanimationend、animationstart、animationiteration、トランジションの場合はtransitionendなどです。これらのイベントが何をするかは推測できるでしょう。これらのアニメーションイベントは、要素のアニメーションが終了、開始、または1回のイテレーションを完了したときにそれぞれ発火します。
現時点ではこれらのイベントにはベンダープレフィックスが必要なため、このデモでは、Craig Bucklerが開発したPrefixedEvent関数を使用します。この関数は、element、type、callbackのパラメータを持ち、これらのイベントをクロスブラウザで利用できるようにします。CSSアニメーションをJavaScriptでキャプチャするための彼の有用な記事はこちらです。また、どの（名前の）アニメーションでイベントが発火しているかを判定する記事もこちらも参照してください。
CSSトランジションの操作
先ほど学んだように、要素を監視し、animationStart、animationIteration、animationEndといったアニメーション関連のイベントに反応することができます。しかし、アニメーション中にCSSアニメーションを変更したい場合はどうなるでしょうか？これには少しトリッキーな操作が必要です！
animation-play-state プロパティ
CSSのanimation-play-stateプロパティは、アニメーションを一時停止し、後で再開する必要がある場合に非常に役立ちます。JavaScriptから次のようにCSSを変更できます（プレフィックスに注意してください）：
要素.スタイル.最新のファッショントレンドをいち早くお届け = 「一時停止」;
要素.スタイル.あなたのスタイルを輝かせるインスピレーション = 「実行中」;
現在のキーフレームのパーセンテージ取得
残念ながら、現時点ではCSSキーフレームアニメーションの正確な「完了率」を取得する方法はありません。 最も良い方法は、setInterval関数を使用して近似することです アニメーション中に100回繰り返されるもので、本質的にはアニメーションの持続時間（ミリ秒）/ 100です。たとえば、アニメーションが4秒間続く場合、setIntervalは40ミリ秒（4000/100）ごとに実行する必要があります。
var showPercent = ウィンドウ.setInterval(関数() {
もし (currentPercent < 100) {
currentPercent += 1;
} そうでなければ {
currentPercent = 0;
}
// Updates a div that displays the current percent
結果.innerHTML = currentPercent;
}, 40);
賢いアプローチ
コーディングを始める前に、トランジションやアニメーションの実行方法を考え、計画することが、問題の最小化と望む効果を得るための最善の方法です。後で解決策をGoogleで検索するよりもさらに良いでしょう！この記事で概説されたテクニックやトリックは、プロジェクトに必要なアニメーションを作成するための最善の方法ではない場合があります。
ここでは、HTMLとCSSだけでも、JavaScriptを使おうと思った問題を解決できる、巧妙な例をいくつか紹介します。
結論として
- 開発者はかつて、CSSとJavaScriptのどちらかを選択する必要がありました。
- JavaScriptでは、CSSトランジションは一般的にCSSアニメーションよりも扱いやすいです。
- CSS行列は、特に初心者にとって、一般的に扱いにくいものです。
- 何を行うべきかを考え、どのように行うかを計画すること。