CSSアニメーションをJavaScriptで制御する方法
Webアニメーションにおいて、開発者は適切な技術であるCSSまたはJavaScriptでアニメーションの要件を測定する必要があります。
Webデザイナーの中には、CSSでのアニメーションはJavaScriptでのアニメーションよりも難しいと考える人もいます。CSSアニメーションにはいくつかの制限がありますが、ほとんどの場合、私たちが思っている以上に能力があります！さらに、通常はパフォーマンスも優れています。
JavaScriptのタッチと組み合わせることで、CSSアニメーションとトランジションは、ほとんどのJavaScriptライブラリよりも効率的にハードウェアアクセラレーションされたアニメーションとインタラクションを実現できます。 早速始めましょう！
早速始めましょう！
CSSトランジションの操作
コーディングフォーラムでは、要素のトランジションのトリガーと一時停止に関する数え切れないほどの質問があります。JavaScriptを使用すると、実際には非常に簡単な解決策です。
要素のトランジションをトリガーするには、それをトリガーするクラス名をその要素にトグルします。
要素のトランジションを一時停止するには、一時停止したいトランジションの時点でgetComputedStyleとgetPropertyValueを使用します。次に、その要素のCSSプロパティを、取得した値と等しく設定します。
CSS「コールバック関数」の使用
CSSトランジションとアニメーションを操作するための最も有用でありながらほとんど知られていないJavaScriptのトリックのいくつかは、それらが発行するDOMイベントです。例えば：アニメーションの場合はanimationend、animationstart、animationiteration、トランジションの場合はtransitionendです。それらが何をするかは推測できるでしょう。これらのアニメーションイベントは、要素のアニメーションが終了したとき、開始したとき、またはそれぞれ1回のイテレーションを完了したときに発行されます。
現時点ではこれらのイベントにはベンダープレフィックスが必要なため、このデモでは、Craig Bucklerによって開発されたPrefixedEventという関数を使用します。この関数は、要素、タイプ、コールバックのパラメータを持ち、これらのイベントをクロスブラウザで動作させるのに役立ちます。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行列は、特に初心者にとっては、一般的に扱いにくいです。
- 何をするべきかを考え、どのように行うかを計画すること。