监测c3动画过渡完成的事件
监测css3动画完成的事件 transitionend
用法：
let element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", function(event) {
element.innerHTML = "Done!";
}, false);
css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件
第一种方法：
用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。
setTimeout(function(){ },time);
第二种方法：
当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。
不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)
例子：
代码如下:
<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
你可以在上个例子中测试一下这两个事件
代码如下:
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/
- $('.order_popBox').show().removeClass('orderPopBox_fadeInUpBig animated').addClass('orderPopBox_fadeInUpBig animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
- $(this).removeClass('orderPopBox_fadeInUpBig animated');
监测c3动画过渡完成的事件的更多相关文章
- ng的动画过渡
动画过渡两种方法 1.使用angular+animation实现 在app-module.ts中引入 BrowserAnimationsModule 1.import { BrowserAnimati ...
- CSS3之边框样式（动画过渡）
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- css动画过渡
css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...
- UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- 动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView
动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView 效果如下: BlackAndWhiteView.h 与 BlackAndWhiteView.m // // BlackAndWhi ...
随机推荐
- 使用VS2015编译xlslib库
环境: win7_x64,VS2015 开始: 一.下载xlslib库 xlslib-package-2.5.0.zip 解压到一个指定目录,如E:\library\xlslib-package-2. ...
- bond-team
nmcli con add type team con-name team0 ifname team0 config '{"runner":{"name": & ...
- jQuery汇总
closest() 方法返回被选元素的第一个祖先元素. $("span").closest("ul")返回 <span> 的第一个祖先元素,是一个 ...
- Java...点点点语法
https://blog.csdn.net/IT_faquir/article/details/49131173
- devC++代码格式化对齐的快捷键
devC++代码格式化对齐的快捷键是ctrl + shift + a ctrl + 左右键可以使光标移动一个单词的距离 shirt + 左右键可以选中光标左右的一个字符
- SQL 快速生成不重复的卡号
--0042-9923-3598 select id = right('000000000000' + cast(cast(rand(checksum(newid()))*1000000000000 ...
- 关于让simulink中display组件显示二进制的方法
关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...
- 查看CentOS版本
1. 查看核心版本 $ uname -or $ uname -a 2. rpm $ rpm --query centos-release [On CentOS] $ rpm --query redha ...
- Spring Cloud Turbine微服务集群实时监控
本文代码下载地址: https://gitlab.com/mySpringCloud/turbine SpringBoot版本:1.5.9.RELEASE (稳定版) SpringCloud版本:Ed ...
- ActiveMQ(为什么要使用消息中间件,JMS传输模型)
为什么要使用消息中间件: 同步请求:当客户端向服务器发送一条请求的时候,此时服务器由于网络,或者处理一些比较大的数据的时候,可能有延迟,客户端 会处于一直等待的状态.只有等待服务器返回处理结果, ...