css3動畫監聽以及暫停
Nov 22, 2016 am 10:24 AM
css3
為一個元素加上一個動畫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);
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)