css3動(dòng)畫(huà)事件—webkitAnimationEnd與計(jì)時(shí)器time事件

發(fā)布時(shí)間：2013-01-31 17:12:49 作者：佚名

用css3的animation完成一個(gè)動(dòng)畫(huà)，當(dāng)只有這個(gè)動(dòng)畫(huà)完成時(shí)才執(zhí)行令一個(gè)事件，比如讓動(dòng)畫(huà)保持在終止的狀態(tài)或其他一些事件,關(guān)于這個(gè)問(wèn)題，本文給出詳細(xì)的解決方案，感興趣的朋友可以了解下或許對(duì)你有所幫助

用css3的animation完成一個(gè)動(dòng)畫(huà)，當(dāng)只有這個(gè)動(dòng)畫(huà)完成時(shí)才執(zhí)行令一個(gè)事件，比如讓動(dòng)畫(huà)保持在終止的狀態(tài)或其他一些事件。我們?cè)撛趺崔k呢。
第一種方法：
用計(jì)時(shí)器，設(shè)定一個(gè)和動(dòng)畫(huà)時(shí)長(zhǎng)一樣的time，過(guò)time事件去執(zhí)行這個(gè)函數(shù)。
setTimeout(function(){ },time);
第二種方法：
當(dāng)-webkit-animation動(dòng)畫(huà)結(jié)束時(shí)有一個(gè)webkitAnimationEnd事件，只要監(jiān)聽(tīng)這個(gè)事件就可以了。
例子：

復(fù)制代碼

代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="@my_programmer">
<title>webkitAnimationEnd</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
#div{
width:200px;
height:200px;
background:#f60;
margin:100px auto;
-webkit-transition: all ease 1s;
}
.change{
-webkit-animation: transform 1s 2 ease;
}
@-webkit-keyframes transform {
% { -webkit-transform: scale(1)}
% { -webkit-transform: scale(2)}
% { -webkit-transform: scale(0.5)}
% { -webkit-transform: scale(1)}
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
var tt = document.querySelector('#div');
tt.addEventListener("click", function(){
this.className = 'change';
}, false);
tt.addEventListener("webkitAnimationEnd", function(){ //動(dòng)畫(huà)結(jié)束時(shí)事件
this.className = this.className.replace('change', ' ');
console.log(2);
}, false);
</script>
</body>
</html>

拓展：
1、-webkit-animation動(dòng)畫(huà)其實(shí)有三個(gè)事件：
開(kāi)始事件 webkitAnimationStart
結(jié)束事件 webkitAnimationEnd
重復(fù)運(yùn)動(dòng)事件 webkitAnimationIteration
你可以在上個(gè)例子中測(cè)試一下這兩個(gè)事件

復(fù)制代碼

代碼如下:

tt.addEventListener("webkitAnimationStart", function(){ //動(dòng)畫(huà)開(kāi)始時(shí)事件
console.log(1);//動(dòng)畫(huà)開(kāi)始時(shí)，控制臺(tái)輸出1
}, false);
tt.addEventListener("webkitAnimationIteration", function(){ //動(dòng)畫(huà)重復(fù)運(yùn)動(dòng)時(shí)的事件
console.log(3);//第一遍動(dòng)作完成時(shí)，控制臺(tái)輸出3
}, false);

2、css3的過(guò)渡屬性transition，在動(dòng)畫(huà)結(jié)束時(shí)，也存在結(jié)束的事件：webkitTransitionEnd;
注意：transition,也僅僅有這一個(gè)事件。