监听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:表示 ...
随机推荐
- P1158 导弹拦截
P1158 导弹拦截 思路: 按每个点到第一个系统的距离排序,然后预处理出每个点及其之后的点到第二个系统的距离的最大值,再循环一遍枚举答案. 代码: #include <cstdio> ...
- 简单的XMPP服务器与客户端交互
由客户端发起 C: <stream:stream to="localhost" xmlns="jabber:client" xmlns:stream=&q ...
- SimpleITK学习（二）图像读取
通常我会用simpleitk来读取dicom文件,主要是为了将dicom文件转换为numpy矩阵,便于输入神经网络,读取dicom文件可分为两种情况,一.单独的dicom文件 二.一系列dicom文件 ...
- 三种实现日志过滤器的方式 (过滤器 (Filter)、拦截器(Interceptors)和切面(Aspect))
1.建立RequestWrapper类 import com.g2.order.server.utils.HttpHelper; import java.io.BufferedReader; impo ...
- python 模块和包以及他们的导入关系
一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...
- CSAPP阅读笔记-汇编语言初探(算术和逻辑操作类指令)-来自第三章3.5的笔记-P128-P135
1.算术和逻辑操作类指令分四类:加载有效地址,一元操作,二元操作和移位,如下: 2. leaq指令,类似mov指令,它左侧的数看似是给出一个地址,在内存中从给定的地址取操作数,传给右边的目的地.但其实 ...
- ie8兼容总结
ie兼容总结 1.页面必须编写规范 doctype 必须申明,否则会让浏览器出现怪异模式呈现,我记得一次是页面没有写doctype,样式的继承也会有问题,明明body里面写了字体样式12px,页面ta ...
- CentOS7 配置免密登陆
首先我通过VMware配置了4台机器 然后依次更改每台机器的hosts文件为: (/etc/hosts) 192.168.32.128 linux1192.168.32.130 linux2192 ...
- Firebird 条件函数
1.iif IIF (<condition>, ResultT, ResultF) 示例: select iif( sex = 'M', 'Sir', 'Madam' ) from Cu ...
- Shell脚本之awk详解
一．基本介绍 1.awk: awk是一个强大的文本分析工具,在对文本文件的处理以及生成报表,awk是无可替代的.awk认为文本文件都是结构化的,它将每一个输入行定义为一个记录,行中的每个字符串定义为一 ...