监听css3的animation动画和transition事件
webkit-animation动画有三个事件：
- 开始事件: webkitAnimationStart
- 结束事件: webkitAnimationEnd
- 重复运动事件: webkitAnimationIteration
css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd
注意：transition 仅有这一个事件
var o = document.getElementById("div1");
// 动画开始时事件
o.addEventListener("webkitAnimationStart", function() {
console.log("动画开始");
})
// 动画重复运动时事件
o.addEventListener("webkitAnimationIteration", function() {
console.log("动画重复运动");
})
// 动画结束时事件
o.addEventListener("webkitAnimationEnd", function() {
console.log("动画结束");
})
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>webkitAnimationEnd</title>
<style type="text/css">
#div1{
margin: 200px auto 0;
width: 200px;
height: 200px;
color: #fff;
background-color: #000;
-webkit-animation: transform 3s 2 ease;
}
@-webkit-keyframes transform {
0%{
-webkit-transform: scale(1) rotate(50deg);
}
30%{
-webkit-transform: scale(2) rotate(100deg);
}
6%{
-webkit-transform: scale(0.5) rotate(-100deg);
}
100%{
-webkit-transform: scale(1) rotate(0);
}
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var o = document.getElementById("div1");
// 动画开始时事件
o.addEventListener("webkitAnimationStart", function() {
alert("动画开始");
})
// 动画重复运动时事件
o.addEventListener("webkitAnimationIteration", function() {
alert("动画重复运动");
})
// 动画结束时事件
o.addEventListener("webkitAnimationEnd", function() {
this.className = "";
alert("动画结束");
})
</script>
</body>
</html>
监听css3的animation动画和transition事件的更多相关文章
- 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- Android 另类方法监听软键盘的弹出收起事件
http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...
- 第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
- CSS3 ：animation 动画
CSS3动画分为二部份: 1.定义动画行为: 使用@keyframes定义动画行为,有两种方式: 方式一:仅定义动画起始样式,与动画结束样式 @keyframes (动画行为名称) { from {b ...
- 以全局监听的方式处理img的error事件
http://www.ovaldi.org/2015/09/11/%E4%BB%A5%E5%85%A8%E5%B1%80%E7%9B%91%E5%90%AC%E7%9A%84%E6%96%B9%E5% ...
- angular指令监听ng-repeat渲染完成后执行自定义事件方法
今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
- 监听浏览器返回，pushState，popstate 事件，window.history对象
在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...
- 事件监听和window.history以及自定义创建事件
1.事件监听window.addEventListener方法: Window.addEventListener(event, function, useCapture); useCapture:表示 ...
随机推荐
- redis 3.0 集群__数据迁移和伸缩容
添加节点 1,启动2个新的redis-sever, 参照 ( redis 3.0 集群____安装 ),端口号为 7007 和 7008 2,使用命令 redis-trib.rb add-node 命 ...
- pandas筛选数据。
https://jingyan.baidu.com/article/0eb457e508b6d303f0a90572.html 假如我们想要筛选D列数据中大于0的行:df[df['D']>0] ...
- 多个tomcat一起运行
1.默认为:8005 2.在D:\apache-tomcat-7.0.85\bin目录下,找到startup.bat,打开并修改. 3.在D:\apache-tomcat-7.0.85\bin目录下, ...
- 洛谷 P3201 [HNOI2009]梦幻布丁(启发式合并)
题面 luogu 题解 什么是启发式合并? 小的合并到大的上面 复杂度\(O(nlogn)\) 这题颜色的修改,即是两个序列的合并 考虑记录每个序列的\(size\) 小的合并到大的 存序列用链表 但 ...
- eAccelerator 配置参数详解
eAccelerator配置参数如下: [eaccelerator]extension=eaccelerator.soeaccelerator.shm_size="64"eacce ...
- sql2008R2新建链接服务器。
1:用sql新建链接服务器对象: /****** Object: LinkedServer [pad] Script Date: 10/23/2018 15:47:45 ******/ EXEC ma ...
- dynamics crm 365 附件上传图片并且显示。
参考了几篇博客做的: 新增websource文件(html): <!DOCTYPE html> <html> <head> <title>注释</ ...
- python 3 map函数用法
公式 f是定义的函数,l是你的list,所有功能都在f函数里完成, map(f,l) 有些网址爬虫出来的链接是一部分,省略了前端通用的,这时我们需要补充进去, 这时就用到了map函数,批量补充网址, ...
- Quartz .net 禁止并行触发
DisallowConcurrentExecution 禁用同步执行防止一个job 同一时间执行多次． [DisallowConcurrentExecution] public class Order ...
- linux新增特性timerfd
https://blog.csdn.net/shreck66/article/details/49745149