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

2024-07-11 08:29:03

字體：大中小

來源：轉載

供稿：網友

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

復制代碼

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

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

復制代碼

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

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

上一篇：IE6下CSS多類選擇符優先級不起作用的bug分析及解決方法

下一篇：checkbox與文字混排無法對齊導致不美觀的解決方法