アニメーション クラスを要素に追加した後も、次のアクションを遅らせるために settimeout を使用しているのは、間違いなく大げさな知識ポイントです。
1.アニメーション アニメーションのモニタリング
-webkit-animation アニメーションには、実際には 3 つのイベントがあります:
開始イベント webkitAnimationStart
終了イベント webkitAnimationEnd
リピート モーション イベント webkitAnimationIteration
dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 console.log("start"); }, false); dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 console.log("end"); }, false); dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件 console.log("end"); //第一遍动画完成输出end }, false);
2.トランジション アニメーションのモニタリング
このアニメーションには、webkitTransitionE という 1 つのイベントのみがあります。 nd
dom.addEventListener("webkitTransitionEnd", function(){ console.log("end"); }, false);
ps 上記のどれも互換性がありません
そのため、非常に少ない settimeout を使用して一貫したアニメーション効果を作成できますが、よく考えてみると、同じ要素の複数のアニメーション効果をネストする必要があるかもしれません。 1 つのアニメーションで完了するだけではありませんか? これには、特定の状況の詳細な分析が必要になる場合があります
3. アニメーションの停止
アニメーションを無限に設定した場合、現在の画像で停止するにはどうすればよいですか