css3动画事件—webkitAnimationEnd与计时器time事件

用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,也仅仅有这一个事件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。