监听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:表示 ...
随机推荐
- 生产者消费者模式-Java实现
感知阶段 随着软件业的发展,互联网用户的日渐增多,并发这门艺术的兴起似乎是那么合情合理.每日PV十多亿的淘宝,处理并发的手段可谓是业界一流.用户访问淘宝首页的平均等待时间只有区区几秒,但是服务器所处理 ...
- dbproxy-main函数
main主函数 /home/id/lua.lua/home/id/lua-c/lua.lua/home/id/lua-c/metatable.lua/home/id/lua-c/1.lua int m ...
- xcode - iPhone Debugging: How to resolve 'failed to get the task for process'? - Stack Overflow
The program being debugged is not being run. Everyone sees this once in a while during Xcode develop ...
- python 获取文件路径
一种是获取当前你正在操作文件的路径 一种是获取你执行文件的路径(比如你在你调用的包里面更改了,执行的时候就不会找你的包的路径,而是你执行文件的路径)
- 高阶篇：4.1）QFD质量功能展开-总章
本章目的:了解QFD概念和作用,为FMEA打下基础. 1.QFD定义 质量功能展开QFD(Quality Function Deployment),是把顾客或市场的要求转化为设计要求.零部件特性.工艺 ...
- Python下使用 redis数据库
初识Rdeis数据库 简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zs ...
- .net core集成 vue
1. 在vs 2017 中选中.csproj文件右键修改. 2. 在.csproj 文件中添加如下代码,即表示在构建之前先执行 npm install 和npm run build. <Targ ...
- Mac上实现对Python的版本切换
最近朋友邀请我帮忙写个比特币自动化交易程序,要求的平台是Okex,用Python写,之前到是自己学过一点自动化交易,不过是MT5的.看了一下Okex提供的API接口,和MT5不一样,它并没有现成的ID ...
- 初次使用github的艰难尝试。
序言 github是全英文的网站,初次使用在没有翻译成中文的情况下很容易做出很多无意义或误操作. 当对本地的文件进行修改后,有时候只是想更新到fork下来的自己的仓库里,看看改得效果如何 .有时候是想 ...
- centos 7编译安装php7
0.下载php源代码 http://www.php.net/releases/ 1.配置编译环境 yum install -y gcc gcc++ libxml2-devel openssl open ...