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 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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实现网上点歌(二)
2006/10/09 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
js实现数字滚动特效
2019/12/16 Javascript
React实现全选功能
2020/08/25 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python实现简单多线程任务队列
2016/02/27 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
售房协议书范本
2015/08/11 职场文书
迎国庆主题班会
2015/08/17 职场文书