监测c3动画过渡完成的事件

Posted qq281113270

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了监测c3动画过渡完成的事件相关的知识,希望对你有一定的参考价值。

监测css3动画完成的事件 transitionend

 

用法:

 

 

	let element = document.getElementById("slidingMenu");
      element.addEventListener("transitionend", function(event) {
        element.innerhtml = "Done!";
      }, false);
      

 

 

css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件
用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/

[html] view plain copy
 
  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动画过渡完成的事件的主要内容,如果未能解决你的问题,请参考以下文章

C3当中的过度和动画

片段中的某些视图未使用过渡动画

java 将循环显示和不显示过渡动画添加到Android片段

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

transition(过渡)动画详解及使用

如何正确地将多个片段添加到片段过渡?