快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → css3用AnimationEnd判断动画是否完成,-css3在动画完成后执行事件

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

时间:2022-09-07 14:26:25人气:作者:快盘下载我要评论
用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;);

相关文章

  • CSS3图片鼠标悬停动画js特效

    CSS3图片鼠标悬停动画js特效,CSS3图片鼠标悬停动画特效。该特效在鼠标悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。...
  • CSS再学习(如何设置背景图片透明)

    CSS再学习(如何设置背景图片透明),怎么设置背景图片的透明度?1 在HTML中在body内部的任意位置写上img标签并定义classclass.back{/*---重点---*//*设置透明度*//*设置图片的层级为最底层,即在所有内容的最下面*//*设置图片固定(不随页面滚动),配合z-index就可以实现让图片作为背景*/}...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。