為一個元素加上一個動畫class之後你還在用settimeout來延遲下一個動作了,你out啦下面這些絕對是裝逼的知識點。
1.animation動畫監聽
-webkit-animation動畫其實有三個事件:
開始事件webkitAnimationStart
結束事件webkitAnimationEnd
重複運動事件「7」這件事
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);
ps以上都沒有做相容的處理
這樣我們就可以用很少的settimeout來做連貫的動畫效果了,但是同一個元素的多個動畫效果可能需要嵌套,想了想如果同一個元素為啥不直接在一個animation裡都完成呢,這個可能要具體情況具體分析了
3.animation動畫停止
當你把動畫設定無限的時候,用什麼方法把他停止在當前畫面呢
dom.addEventListener("webkitTransitionEnd", function(){ console.log("end"); }, false);