监测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. Centos7 + Python3.6 + Django + virtualenv + gunicorn + supervisor 环境配置详解

    跟着网上的教程走发现行不通阿!好多都是写个大概,而且每人的环境都是有些许差异的,比如说权限问题阿,等等都会造成安装的失败 说明:本教程在你已经拥有Centos7系统,已经安装好nginx服务器,已经安 ...

  2. Adventure 魔幻历险

    发售年份 1979 平台 VCS 开发商 雅达利(Atari) 类型 冒险 https://www.youtube.com/watch?v=YS-HYWRdb2g

  3. 命令生成所有数据库表模型以及 CRUD

    将下列代码写到文件复制到项目 console\controller 目录下: <?php namespace console\controllers; use Yii; use yii\cons ...

  4. Python学习：列表、元组、字典、集合

    转载:https://www.cnblogs.com/xc-718/p/9632942.html 列表/元组 列表和元组都是序列结构,它们本身很相似,但又有一点不同: 列表是用方括号标记,如:a=[1 ...

  5. 在windows系统上使用pip命令安装python的第三方库

    在windows系统上使用pip命令安装python的第三方库 通过cmd启动命令行后,直接输入pip命令,有时候命令行会提示我们pip不是一个指令,这个时候我们可以通过python的集成开发环境里面 ...

  6. Nginx 配置location root 转自https://blog.csdn.net/rofth/article/details/78581617

    nginx指定文件路径有两种方式root和alias,root与alias主要区别在于nginx如何解释location后面的uri,这会使两者分别以不同的方式将请求映射到服务器文件上. 最基本的区别 ...

  7. Hello 2019

    2019也要创造价值! 热爱生活!

  8. C#使用Linq to Sqlite

    1.首先到Nuget命令行运行: Install-Package linq2db.SQLite 2.在项目下添加一个文件夹:DataModels,用以存放数据库相关的文件,显得规整 3.找到CopyM ...

  9. JumpServer 安装配置

    环境 系统:Centos 7.4 阿里云ECS,单独绑定弹性公网IP 关闭selinux,防火墙对本机公司IP全开 #CentOS 7 $ setenforce 0 # 临时关闭,重启后失效 #修改字 ...

  10. python3学习笔记12(变量作用域）

    变量作用域 参考http://www.runoob.com/python3/python3-function.html Python 中,程序的变量并不是在哪个位置都可以访问的,访问权限决定于这个变量 ...