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


Posted in HTML / CSS onJanuary 31, 2013

用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 / CSS 相关文章推荐
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 #HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 #HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 #HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 #HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 #HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 #HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 #HTML / CSS
You might like
php include和require的区别深入解析
2013/06/17 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
js实现登录验证码
2016/12/22 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
自我推荐书
2013/12/04 职场文书
代办委托书怎样写
2014/04/08 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
英语读书笔记
2015/07/02 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书