css3動畫事件—webkitAnimationEnd與計時器time事件

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

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

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

復(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(){ //動畫結(jié)束時事件
this.className = this.className.replace('change', ' ');
console.log(2);
}, false);
</script>
</body>
</html>

拓展：
1、-webkit-animation動畫其實有三個事件：
開始事件 webkitAnimationStart
結(jié)束事件 webkitAnimationEnd
重復(fù)運動事件 webkitAnimationIteration
你可以在上個例子中測試一下這兩個事件

復(fù)制代碼

代碼如下:

tt.addEventListener("webkitAnimationStart", function(){ //動畫開始時事件
console.log(1);//動畫開始時，控制臺輸出1
}, false);
tt.addEventListener("webkitAnimationIteration", function(){ //動畫重復(fù)運動時的事件
console.log(3);//第一遍動作完成時，控制臺輸出3
}, false);

2、css3的過渡屬性transition，在動畫結(jié)束時，也存在結(jié)束的事件：webkitTransitionEnd;
注意：transition,也僅僅有這一個事件。