css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件

原创 2014年08月16日 17:04:11
用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/

$('.order_popBox').show().removeClass('orderPopBox_fadeInUpBig animated').addClass('orderPopBox_fadeInUpBig animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
			 	$(this).removeClass('orderPopBox_fadeInUpBig animated');

相关文章推荐

设置动画结束的监听事件

在项目中,今天就遇到了动画还没结束就跳到下个界面,这很显然是糊弄不了客户——.——无奈 于是就找解决方案,很显然最好的方案就是监听动画结束 解决办法:主要利用SetAnimationLisener...

监听animation动画事件

当你需要在某个动画开始或者结束时,去触发某一个事件,那么这时候可以用到监听animation事件方法; 具体如下:     1、-webkit-animation动画其实有三个事件...

JS如何监控css3动画

摘要: 我们已经知道css3 transitions 可以让动画变得更简单和优雅, 而css3 keyframe animations 甚至可以完成复杂的细粒度的运动。 现大多主流浏览器支持trans...

css3 使用animation 只执行一次然后停留在执行后的状态

-webkit-animation:'index' 5s ease-in-out 0 1 alternate forwards; forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧...

css3动画如何在动作结束时保持该状态不变

animation-fill-mode : none | forwards | backwards | both; 属性值值 描述 none 默认值。动画在动画执行之前和之后不会应用任何...

js判断css动画是否完成 animation,transition

气死了,发现这些鸟人讲事情都讲一半,害死初学者。 css动画有两种,animation,transition,所以分开来讲。 1、animation: css定义 #left1{}html定义:安全那...

transitionend animationend 事件兼容问题

平时在做动画的时候,如果涉及交互比较多一些的时候。比如像拆礼盒,摇筛子等基于微信的小游戏,transitionend和animationend这个两个事件都会用到,之前做微信的小游戏过程中,把两个事件...

【CSS3】transition过渡和animation动画

写在前面的话: 之前实习的时候,刚开始的第一个月就是在研究CSS3的动画,因为要做转盘抽奖活动,预研的时候,我是用Canvas来画的,当时为了一个问题“如何使用canvas让图片围绕中心点旋转”折...

jquery判断元素动画是否完成

$(".box").is(":animated")就这么简单的一句话,来一个demo var wait=setInterval(function(){                 if(!$(...
  • jinuxm
  • jinuxm
  • 2016年12月08日 17:16
  • 1387

jQuery停止动画和判断是否处于动画状态(转)

1、停止元素的动画 很多时候需要停止匹两己元素正在进行的动画,例如上例的动画,如l果需要在某处停止动画,需要使用stop()方法。stop()方法的语法缩构为: stop([clearQueue]...
  • dragoo1
  • dragoo1
  • 2015年09月23日 15:21
  • 3277
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件
举报原因:
原因补充:

(最多只允许输入30个字)