css3アニメーションの監視と一時停止

高洛峰
リリース: 2016-11-17 10:33:14
オリジナル
1279 人が閲覧しました

アニメーション クラスを要素に追加した後も、次のアクションを遅らせるために 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. アニメーションの停止

アニメーションを無限に設定した場合、現在の画像で停止するにはどうすればよいですか


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート