监测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 ...
随机推荐
- Python3的List操作和方法
列表函数: len(list):列表元素个数 max(list):返回list中最大的元素 min(list):返回list中最小的元素 list(seq):将元组转换为列表 列表方法: list.a ...
- 【mysql】Mha实现高可用数据库架构
MySQL高可用平台需要达到的目标有以下几点: 1.数据一致性保证这个是最基本的同时也是前提,如果主备的数据的不一致,那么切换就无法进行,当然这里的一致性也是一个相对的,但是要做到最终一致性. 2.故 ...
- PythonStudy——生成器
# 生成器:自定义的迭代器对象 # -- 就是用函数语法来声明生成器,用yield关键字取代return关键字来返回值,参数没有多少变化 # 总结:有yield关键字的函数,函数名() 不是调用函数, ...
- 【javaScript基础】异常处理
理解异常在javaScript面向对象编程是非常重要的,异常是一种非常强大的处理错误的方式. 错误处理 首先我们来看一个有问题的代码: nonexistant(); ...
- kafka connect 使用说明
KAFKA CONNECT 使用说明 一.概述 kafka connect 是一个可扩展的.可靠的在kafka和其他系统之间流传输的数据工具.简而言之就是他可以通过Connector(连接器)简单.快 ...
- Go 知识点
必须在源文件中非注释的第一行指明这个文件属于哪个包,如:package main. package main表示一个可独立执行的程序,每个 Go 应用程序都包含一个名为 main 的包. main 函 ...
- [转]在ASP.NET Core中使用百度在线编辑器UEditor
原文地址:https://www.cnblogs.com/durow/p/6116393.html 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服 ...
- pagination.js 使用
pagination.js 使用方式 $('.paginationjs').pagination({ dataSource: 'DetailImage?handler=Search', locator ...
- Intellij IDEA超好用的快捷键
1.首推 Ctrl+Shift+Enter,自动跳出括号,在行尾添加分号,并自动回车. 2.Ctrl+Shift+J,将多行代码折叠成一行. 当你遇到的时候,这个快捷键非常实用.比如你在写painle ...
- AJAX注册
注册的时候,编号自动生成,需要在数据库查询出当前的最大编号是多少,然后在此基础上+1//绑定编号 $.ajax({ url: "ajax/returnUcode.ashx", da ...