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媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python如何构建mock接口服务
2021/01/28 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
生产部厂长职位说明书
2014/03/03 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
大学生入党群众意见书
2015/06/02 职场文书
教师节联欢会主持词
2015/07/04 职场文书
经销商会议开幕词
2016/03/04 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL