监测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. Gitlab迁移之数据库报错解决

    Gitlab迁移需同版本迁移,恢复过程会出现如下提示: WARNING:  no privileges were granted for "public" 解决方法: 1. 编辑/ ...

  2. Centos7安装Docker CE

      每次安装Docker都要去找文档,或者每次安装的都不一样,还是要好好管理自己的这些东西,下次用的时候可以省很多的时间   Docker的早期版本称为docker或docker-engine:现在的 ...

  3. OpenStack控制节点上搭建Q版glance服务（step4）

    glance服务监听两个端口:9191和9292 其中9292端口是对外提供服务的,9191是服务组件间使用的. 1.安装glance组件 yum --enablerepo=centos-openst ...

  4. win10 caffe GPU环境搭建

    一.准备 系统:win10 显卡:gtx1050Ti 前期的一些必要软件安装,包括python3.5.matlab2016.vs2015.git, 可参考:win10+vs2015编译caffe的cp ...

  5. 信号监测---verilog

    信号监测---verilog 此模块用于监测某一信号源是否持续稳定的传送. 监测思路:监测信号源高电平或者低电平的宽度是否始终保持一致(一定范围内允许有误差) `timescale 1ns / 1ps ...

  6. 服务器对接码云webhooks

    服务安装git php代码(外网必须可以访问) <?php //本地路径滚adminasdfdasfasdf $file = "/wwwroot/webhooksLog.txt&quo ...

  7. 基于嵌入式linux路由转发功能的实现

    环境 arm7开发板, uclinux系统,kernel version: linux-2.4.x arm芯片的单网卡双网口设备,eth0 WAN口 ipaddr 192.168.9.61 eth0: ...

  8. VSS2005源代码管理启用http方式

    一直在使用vss管理源代码,在服务器上使用文件共享当方式.最近安全形式升级,禁止使用文件共享,因此要升级到http方式. 按照网上的教程,一路前行. 1.登录服务器桌面,打开vss administr ...

  9. OSPFV3综合实验 （第三组）

    拓扑图 本次试验规划:拓扑分4个区域,其中区域2采用帧中继实现区域内互通的前提下配置OSPF.ospfv3.R7与R8之间配置rip实现互通,区域1作为nssa区域,实现路由注入.最终实现全局互通. ...

  10. bitmap--Bitmap详解与Bitmap的内存优化

    一.Bitmap: Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件. 常用方法: public voi ...