监测css3动画完成的事件 transitionend

用法：

	let element = document.getElementById("slidingMenu");

      element.addEventListener("transitionend", function(event) {

        element.innerHTML = "Done!";

      }, false);
css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件
2014年08月16日 17:04:11

阅读数：59914
用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。 
第一种方法： 
用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。 
setTimeout(function(){ },time); 
第二种方法：

当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。

不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)

例子：

复制代码

代码如下:

<!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,也仅仅有这一个事件。

案例： 下面案例可以参考链接： http://daneden.github.io/animate.css/

  1. $('.order_popBox').show().removeClass('orderPopBox_fadeInUpBig animated').addClass('orderPopBox_fadeInUpBig animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
  2. $(this).removeClass('orderPopBox_fadeInUpBig animated');

监测c3动画过渡完成的事件的更多相关文章

  1. ng的动画过渡

    动画过渡两种方法 1.使用angular+animation实现 在app-module.ts中引入 BrowserAnimationsModule 1.import { BrowserAnimati ...

  2. CSS3之边框样式（动画过渡）

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  3. css动画过渡

    css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

  4. UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  5. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  7. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  8. GSAP JS基础教程--动画的控制及事件

    好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...

  9. 动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView

    动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView 效果如下: BlackAndWhiteView.h 与 BlackAndWhiteView.m // // BlackAndWhi ...

随机推荐

  1. javascript 创建节点和新增节点

    createElement(tabName) 创建一个为tagName的新元素节点 ANode.appendChild(BNode)把B节点追加至A节点的末尾 insertBefore(ANode,B ...

  2. AE插件:能量激光描边光效特效Saber Mac汉化版

    与大家分享一款非常好用的AE插件Saber插件汉化版.videocopilot saber是一款能量激光描边光效特效AE插件,可以帮助用户制作出能量激光.传送门.霓虹灯.电流.光束.光剑等效果.小编现 ...

  3. PythonStudy——PyCharm使用技巧 Column Selection Mode（列选择模式）

    PyCharm的Column Selection Mode提供了列选择功能. 使用: 在当前文件右键->Column Selection Mode->用鼠标垂直选择文本 快捷键:Alt + ...

  4. 一键部署office的工具——OTool

    OTool可用于office的下载.安装和激活,其激活方式是调用kmspico服务器进行的,官方网站是https://otp.landian.vip/zh-cn/,最新版本5.9.3.6在2019/4 ...

  5. 谷歌浏览器添加JSON-handle插件

    访问谷歌应用商店必须FQ,具体可安装谷歌访问助手:http://www.cnblogs.com/yangcx666/p/8783642.html 不想FQ的可以百度 "谷歌插件网" ...

  6. VS Code直接编辑下一行

    ctrl + enter 可以直接跳转到下一行进行编辑,本行后面的字符不受影响. 这在书写html脚本时非常有用.

  7. 使用xheditor时 cloneRange错误 ext.net

    使用ext.net 加  xheditor时,一直报 cloneRange错误. 于是 按照说明但独使用xheditor  ,检查无错,正常使用, 因此排除版本问题. <ext:panel ru ...

  8. 批处理for中字符串截取必须先把循环变量代替出来才行！！！

    @echo off & setlocal enabledelayedexpansion set ifo=abc,def,ghi,jkl,mnopqrstuvwxyz0123456789 ech ...

  9. python中Multiprocessing

    import multiprocessing as mp #该函数不能有返回值,如果需要则应该将值放在queue中 def job(a,b): print('aaaa') if __name__ == ...

  10. linux中的查找命令find，locate，which，whereis

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了.  which       查看可执行文 ...