首頁 > web前端 > css教學 > css3動畫監聽以及暫停

css3動畫監聽以及暫停

高洛峰
發布: 2016-11-17 10:33:14
原創
1283 人瀏覽過

為一個元素加上一個動畫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);
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板