css3动画事件—webkitAnimationEnd
生活随笔
收集整理的這篇文章主要介紹了
css3动画事件—webkitAnimationEnd
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
轉(zhuǎn)載鏈接：http://www.jb51.net/css/72443.html
用css3的animation完成一個(gè)動(dòng)畫，當(dāng)只有這個(gè)動(dòng)畫完成時(shí)才執(zhí)行令一個(gè)事件，比如讓動(dòng)畫保持在終止的狀態(tài)或其他一些事件。我們?cè)撛趺崔k呢。
第一種方法：
用計(jì)時(shí)器，設(shè)定一個(gè)和動(dòng)畫時(shí)長(zhǎng)一樣的time，過time事件去執(zhí)行這個(gè)函數(shù)。
setTimeout(function(){ },time);
第二種方法：
當(dāng)-webkit-animation動(dòng)畫結(jié)束時(shí)有一個(gè)webkitAnimationEnd事件，只要監(jiān)聽這個(gè)事件就可以了。
例子：
拓展：
1、-webkit-animation動(dòng)畫其實(shí)有三個(gè)事件：
開始事件 webkitAnimationStart
結(jié)束事件 webkitAnimationEnd
重復(fù)運(yùn)動(dòng)事件 webkitAnimationIteration
你可以在上個(gè)例子中測(cè)試一下這兩個(gè)事件 tt.addEventListener("webkitAnimationStart", function(){ //動(dòng)畫開始時(shí)事件 console.log(1);//動(dòng)畫開始時(shí)，控制臺(tái)輸出1 }, false); tt.addEventListener("webkitAnimationIteration", function(){ //動(dòng)畫重復(fù)運(yùn)動(dòng)時(shí)的事件 console.log(3);//第一遍動(dòng)作完成時(shí)，控制臺(tái)輸出3 }, false);
2、css3的過渡屬性transition，在動(dòng)畫結(jié)束時(shí)，也存在結(jié)束的事件：webkitTransitionEnd;
注意：transition,也僅僅有這一個(gè)事件。
總結(jié)
以上是生活随笔為你收集整理的css3动画事件—webkitAnimationEnd的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python kmeans聚类 对二维坐
- 下一篇： 豆瓣电影 Top 250