监测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. CodeForce Div 2 C. Masha and two friends

    题目链接: http://codeforces.com/contest/1080/problem/C 思路:双向延长两个矩形方块的4边,会形成一个被分割为9块的更大立方体. 计算所有的9个方框.方框中 ...

  2. TemplatePart特性的作用

    看wp控件的源代码时发现TemplatePart特性,于是在百度上查了查: http://blog.csdn.net/wushang923/article/details/9224533 Templa ...

  3. javaEE REST 基于第三方框架Restlet

    郭晨 软件151 1531610114 1.修改web.xml文件 添加URL模式(<url-pattern>)到Servlet的映射关系 设置Servlet的初始化参数(<init ...

  4. c# 坑人的发邮件组件

    System.Net.Mail 在服务器25端口被封禁的情况下,无法使用其它诸如SSL 465端口发送.用过时的System.Web.Mail却可以.是微软更新速度太快呢,还是标准不一致呢. Syst ...

  5. 使用 Flask-Docs 自动生成 Api 文档

    影响我写文档的原因可能是代码和文档分离,有时候写完代码会忘记补文档,而且不能及时查看,使用 Flask-Docs 可以解决我的问题,这个插件可以根据代码注释生成文档页面,代码注释改动文档可以及时更新, ...

  6. 环境准备阶段--搭建oracle linux 6.5系统

    环境准备阶段--搭建oracle linux 6.5系统 选择9.x版本兼容性 分配6GB内存 再次重启可以进入桌面,提示如下,勾选然后close 配置主机名,网络.hosts [root@ocp-1 ...

  7. devexpress gridview代码设置

    39 //绑定DataTable 40 gridControl1.DataSource = dt; 41 gridView1.OptionsCustomization.AllowColumnMovin ...

  8. Tomcat 启动报错：host-manager does not exist or is not a readable directory

    http://blog.csdn.net/yh88356656/article/details/50519120 新安装一个Tomcat,我们肯定会删除Tomcat Webapps下的自带项目,在考入 ...

  9. Git在已有的分支上新建个人分支开发

    在Dev分支上新建一个分支(可以通过Git TE网页创建) 然后就可以从Source下拉列表中看到新建的分支(new_name1)了. 远程分支创建完成之后,就可以在本机上面使用Git GUI Her ...

  10. Oracle 巡检命令

    [grid@XXXXX ~]$ asmcmd -pASMCMD [+] > lsdg