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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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的Yii框架中的日志功能
2016/03/17 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python如何实现复制目录到指定目录
2020/02/13 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
合作协议书范本
2014/10/25 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL