アニメーションはドキュメントとアプリを構成する要素を使って驚くべき事を行うことを可能にします。行いたくても理解しやすくないことがあったり、すぐに思いつかないであろう巧妙な方法があります。この記事は停止したアニメーションをどのように再び実行するのかを含む、あなたの仕事を楽にするかもしれない私達が見つけた秘訣やトリックを集めたものになります。アニメーションの仕様書では再度アニメーションを実行する方法を提示していません。設定することさえもできません。その代わりに、停止したアニメーションをリプレイするための巧妙なトリックを使う必要があります。ここでの私達が考える停止したアニメーションのリプレイを行う方法はあなたに提案することに対して十分に信頼、安定しています。アニメーションを再生(またはリプレイ)するためのボタンを定義しましょう。使ってアニメーションそのものを定義しましょう。ここではお見せしません。2s;}ここに2つのクラスがあります。外見の基本的な記述です。アニメーションするために2秒間を使うべきだと書いてあります。所定の位置でアニメーション効果を開始しないので、アニメーションすることはないでしょう。ボタンをクリックした時に呼ばれます。再度アニメーションを実行する唯一の方法はアニメーション効果を取り除くことであるため、あなたが行いたいことをドキュメントに知らせてあげて、ドキュメントにスタイルの再計算させてあげましょう。その時要素に戻るためのアニメーション効果を追加します。それを実現するためには、私達は創造的でなければなりません。関数が呼び出された時に起きることは以下のものです。現在適用されている他のどのクラスを取り除く効果を持ちます。アニメーション効果を取り除きます。クラスのリストを変更することはそのスタイルの再計算が完了するまで効果を持たず、更新はその変更を反映するために発生し続けます。使用し、コールバックを指定します。コールバックは次のドキュメントの再描画の前に適切に実行されます。問題はそのコールバックの呼び出しが再描画の前であるゆえに、スタイルの再計算はまだ実際に起きてはいないのです。今回は、スタイルの再計算が行われた後の次の再描画の前に、コールバックが実行されます。クラスを追加し、そのためクラスを追加したことによる再描画はもう一度要素のアニメーションを始めることでしょう。ボタンにイベントハンドラーを追加することは必要です。取り除くことはそれの次の状態にジャンプまたは割り込ませます。代わりに、アニメーションを完了して停止する場合は、別のアプローチを試す必要があります。主要なトリックは次のものです。可能なら自身を含めるようアニメーションさせること。信頼するべきではないことを意味します。代わりに一回の繰り返しの中で完全なアニメーションを経過するキーフレームアニメーションを明示的に書くべきです。イベントが発生した時に使われるアニメーションをクリアーすること。テクニックをどのように利用するかを示します。inbox.現在、ニュースレターは英語でのみ提供されています。従って私の個人情報を扱うことに同意します。