南强小屋 Design By 杰米
用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,也仅仅有这一个事件。
标签:
css3动画,计时器

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“css3动画事件—webkitAnimationEnd与计时器time事件”

暂无css3动画事件—webkitAnimationEnd与计时器time事件的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。