transitionend animationend 事件兼容问题

最新推荐文章于 2021-06-13 00:41:40 发布
最新推荐文章于 2021-06-13 00:41:40 发布
阅读量1.5k 收藏
点赞数
分类专栏： css3 H5 浏览器兼容问题 文章标签： html5 css3 动画
css3 同时被 3 个专栏收录
49 篇文章 2 订阅
订阅专栏
浏览器兼容问题
35 篇文章 0 订阅
订阅专栏
H5
18 篇文章 0 订阅
订阅专栏

      平时在做动画的时候，如果涉及交互比较多一些的时候。比如像拆礼盒，摇筛子等基于微信的小游戏，transitionend和animationend这个两个事件都会用到，之前做微信的小游戏过程中，把两个事件在pc端和移动端的常用的浏览器给测试了一下并做了整理，虽然浏览器的支持结果大同小异，但是还是有一些细微的差别的，其中微信和qq浏览器（其实是同一个）对于两个事件都需要加前缀！

一、transitionend事件

       1.浏览器支持情况

01

      注：transitionend的事件只有三种形式，之所以不检测MozTransitionEnd，msTransitionEnd 这两个的事件，因为火狐和IE都已经支持了transitionend，相反的对于加前缀反而不执行事件，oTransitionEnd  代表的是欧朋浏览器，transitionend 一定要小写 否则浏览器不识别，webkitTransitionEnd中T和E是一定要大写的，w大小写是无所谓的！

       2.transitionend有过渡效果的css属性

      为什么要知道有过渡css属性的呢？首先是，实例运用中，经常会发现，一个元素起始时的display:none,想通过transition来实现动画过渡效果，结果发现不行，因为display没有过渡效果！ 其次，有过渡的css属性决定了transtionend的执行次数(下面会说)，在transitionDuration的时间不为0的时候，有过渡效果的css属性，也就transition-property支持的css的属性有:

02

      3.transitionend事件的多次执行

     transitionend事件执行了几次是取决于transition-property的设置，假设我们设置transitionProperty="width,height,background-color,transform"，那么这个时候你应该猜测得到transitionend执行了4次（如果某个属性没有改变值，那么是不会触发transitionend的事件）,尝试运行下面的代码就知道：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
	<title>transitionend - 蜗牛博客(wnworld.com)</title>
	<link rel="stylesheet" type="text/css" href="http://wnworld.com/wp-content/themes/temp1/css/reset.css">
</head>
<body>
	<style type="text/css">
		.movebox{
			width:50px;
			height:50px;
			position: relative;
			background:#f60;
			-webkit-transition-duration: 1s;
			-o-transition-duration: 1s;
			transition-duration: 1s;
			-webkit-transition-timing-function: linear;
			-o-transition-timing-function: linear;
			transition-timing-function: linear;
		}
	</style>


		
	<div class="movebox" id="J_movebox"></div>
	<div class="handguide-btn fixed align-c ">
		<a href="javascript:void(0)" class="wn-btn wn-btn-success" id="J_movingbtn">&nbsp;&nbsp;运动&nbsp;&nbsp; </a> 
		<a href="javascript:void(0)" class="wn-btn wn-btn-success" id="J_returnbeginbtn">&nbsp;&nbsp;恢复&nbsp;&nbsp; </a> 
	</div>
	<script type="text/javascript">
			var movebox=document.getElementById("J_movebox"),
				btn=document.getElementById("J_movingbtn"),
				returnbeginbtn=document.getElementById("J_returnbeginbtn"),
				i=0,
				transition="transition",
				body=document.body || document.documentElement,
				style=body.style;
			var	transitionEnd=(function(){
					var transEndEventNames = {
				      WebkitTransition : 'webkitTransitionEnd',
				      MozTransition    : 'transitionend',
				      OTransition      : 'oTransitionEnd otransitionend',
				      transition       : 'transitionend'
				    }
					for(var name in transEndEventNames){
						if(typeof style[name] === "string"){
							return transEndEventNames[name]
						}
					}
				})();


			var vendorPrefix=(function(){
					var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
					transition=transition.charAt(0).toUpperCase() + transition.substr(1);   
					while (i < vendor.length) {
						if (typeof style[vendor[i] + transition] === "string") {
						  return vendor[i];
						}
						i++;
					}
					return false;
				})();


			movebox.addEventListener(transitionEnd,function(){
				i++;
				alert("第"+i+"次执行"+transitionEnd+"事件！")
			},false)
			btn.οnclick=function(){
                                i=0;
				movebox.style.width="150px";
				movebox.style.height="150px";
				movebox.style.backgroundColor="#000";
				movebox.style[vendorPrefix+"Transform"]="translate(100px,100px) rotate(45deg)";
				movebox.style[vendorPrefix+"TransitionProperty"]="width,height,background-color,transform";
			}
			returnbeginbtn.οnclick=function(){
				i=0;
				movebox.style.width="50px";
				movebox.style.height="50px";
				movebox.style.backgroundColor="#f60";
				movebox.style[vendorPrefix+"Transform"]="translate(0px,0px) rotate(0deg)";
				movebox.style[vendorPrefix+"TransitionProperty"]="width,height,background-color,transform";
			}
	</script>
</body>
</html>
运行

      结果很明显：transitionend触发了四次，因为width,height,background-color,transform四个属性都被改变了！而在实际的运用中，我们往往只需要所有的动画结束后执行一次transitionend的事件来达做我们想要做的事情，这个时候就需要我们做一些处理，让transitionend事件在多个css属性改变的情况下执行一次，现在定义一个函数handleTransitionEndEvent来处理多次触发的问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var handleTransitionEndEvent= function (elem,fn,duration){
     var called= false ;
     //在每次transitionEnd的事件后执行该函数
     var callback = function (){
             if (!called){
                 fn();
                 called= true ;
             } 
     };
     elem.addEventListener(transitionEnd, function (){
         callback();
         //通过setTimeout来补救windowphone中不触发事件的问题
         setTimeout(callback,duration);
     }, false );      
};

      通过这个函数函数，就可以解决了transitioned事件多次执行的问题，达到我们想要的目的，这时候把这段函数加到上面的代码中（为了配合本示例，将called的变量放到函数外面），运行下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
	<title>transitionend - 蜗牛博客(wnworld.com)</title>
	<link rel="stylesheet" type="text/css" href="http://wnworld.com/wp-content/themes/temp1/css/reset.css">
</head>
<body>
	<style type="text/css">
		.movebox{
			width:50px;
			height:50px;
			position: relative;
			background:#f60;
			-webkit-transition-duration: 1s;
			-o-transition-duration: 1s;
			transition-duration: 1s;
			-webkit-transition-timing-function: linear;
			-o-transition-timing-function: linear;
			transition-timing-function: linear;
		}
	</style>


		
	<div class="movebox" id="J_movebox"></div>
	<div class="handguide-btn fixed align-c ">
		<a href="javascript:void(0)" class="wn-btn wn-btn-success" id="J_movingbtn">&nbsp;&nbsp;运动&nbsp;&nbsp; </a> 
		<a href="javascript:void(0)" class="wn-btn wn-btn-success" id="J_returnbeginbtn">&nbsp;&nbsp;恢复&nbsp;&nbsp; </a> 
	</div>
	<script type="text/javascript">
			var movebox=document.getElementById("J_movebox"),
				btn=document.getElementById("J_movingbtn"),
				returnbeginbtn=document.getElementById("J_returnbeginbtn"),
				i=0,
				transition="transition",
				body=document.body || document.documentElement,
				style=body.style;
			var	transitionEnd=(function(){
					var transEndEventNames = {
				      WebkitTransition : 'webkitTransitionEnd',
				      MozTransition    : 'transitionend',
				      OTransition      : 'oTransitionEnd otransitionend',
				      transition       : 'transitionend'
				    }
					for(var name in transEndEventNames){
						if(typeof style[name] === "string"){
							return transEndEventNames[name]
						}
					}
				})();


			var vendorPrefix=(function(){
					var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
					transition=transition.charAt(0).toUpperCase() + transition.substr(1);   
					while (i < vendor.length) {
						if (typeof style[vendor[i] + transition] === "string") {
						  return vendor[i];
						}
						i++;
					}
					return false;
				})();


			var called=false;
			var handleTransitionEndEvent=function(elem,fn,duration){	
				//在每次transitionEnd的事件后执行该函数
				var callback = function(){
						if (!called){
							fn();
							called=true;
						}
				};
				elem.addEventListener(transitionEnd,function(){
					callback();
					setTimeout(callback,duration);
				},false);
			};
			function transitionEndFn(){
			 	i++;
				alert("执行了"+transitionEnd+"事件"+i+"次");
			};
			handleTransitionEndEvent(movebox,transitionEndFn,"1s");
			btn.οnclick=function(){
				i=0;
				called=false;
				movebox.style.width="150px";
				movebox.style.height="150px";
				movebox.style.backgroundColor="#000";
				movebox.style[vendorPrefix+"Transform"]="translate(100px,100px) rotate(45deg)";
				movebox.style[vendorPrefix+"TransitionProperty"]="width,height,background-color,transform";
			}
			returnbeginbtn.οnclick=function(){
				i=0;
				called=false;
				movebox.style.width="50px";
				movebox.style.height="50px";
				movebox.style.backgroundColor="#f60";
				movebox.style[vendorPrefix+"Transform"]="translate(0px,0px) rotate(0deg)";
				movebox.style[vendorPrefix+"TransitionProperty"]="width,height,background-color,transform";
			}
	</script>
</body>
</html>
运行

      结果每次效果过渡完后，只执行了一次transtionend的事件！关于transitonend的jquery的处理方式，可以参考Bootstrap中的transition.js的处理方式。

二、animationend事件

      1.animationend浏览器支持情况:

03

      animationend的事件只有两种形式：animationend和WebkitAnimationEnd(注意事件名称的大小写)

      2.animationend事件执行次数:

      不同于transitionend事件,animationend只会在动画完成后执行一次：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
	<title>动画</title>
	<link rel="stylesheet" type="text/css" href="http://wnworld.com/wp-content/themes/temp1/css/reset.css">
	<script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
	<script type="text/javascript" src="plugin.js"></script>
	<style type="text/css">
		.movebox{
			width:100px;
			height:100px;
			border:1px solid #5d5d5d;
			background: #f60;
			overflow:hidden;
			margin:10px;
			-webkit-animation-duration:1s ;
			-o-animation-duration:1s ;
			animation-duration:1s ;
		}
		@keyframes mymove{
			0%{
				-webkit-transform: translate(0px,0px);
				-moz-transform: translate(0px,0px);
				-ms-transform: translate(0px,0px);
				transform: translate(0px,0px);
			}
			100%{
				-webkit-transform: translate(100px,100px);
				-moz-transform: translate(100px,100px);
				-ms-transform: translate(100px,100px);
				transform: translate(100px,100px);
			}
		}
		@-webkit-keyframes mymove{
			0%{
				-webkit-transform: translate(0px,0px);
				-moz-transform: translate(0px,0px);
				-ms-transform: translate(0px,0px);
				transform: translate(0px,0px);
			}
			100%{
				-webkit-transform: translate(100px,100px);
				-moz-transform: translate(100px,100px);
				-ms-transform: translate(100px,100px);
				transform: translate(100px,100px);
			}
		}
	</style>
</head>
<body>
	<div class="movebox" id="J_movebox"></div>
	<div class="handguide-btn fixed align-c ">
		<a href="javascript:void(0)" class="wn-btn wn-btn-success" id="J_movingbtn">&nbsp;&nbsp;运动&nbsp;&nbsp; </a> 
	</div>
	<script type="text/javascript">
		var movebox=document.getElementById("J_movebox"),
			btn=document.getElementById("J_movingbtn"),
			transition="transition",
			body=document.body || document.documentElement,
			style=body.style;
		var vendorPrefix=(function(){
					var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
					transition=transition.charAt(0).toUpperCase() + transition.substr(1);   
					while (i < vendor.length) {
						if (typeof style[vendor[i] + transition] === "string") {
						  return vendor[i];
						}
						i++;
					}
					return false;
			})();
		var animationEnd=(function(){
			if(vendorPrefix=="Webkit"){
				return "webkitAnimationEnd";
			}else{
				return "animationend";
			}
		}());
		movebox.addEventListener(animationEnd,function(){
			alert("执行了"+animationEnd+"事件！");
			movebox.style[vendorPrefix+"AnimationName"]="";
		},false)
		btn.οnclick=function(){
			movebox.style[vendorPrefix+"AnimationName"]="mymove";
		}
	</script>
</body>
</html>
运行

理解transtionend和animationend两个事件，主要是在浏览器的前缀上面，搞清楚了这东西，做起来就比较得心应手了！

转载于http://wnworld.com/archives/191.html


liu__software
关注
专栏目录
transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
专研前端，探索后端
04-26 424
transitionend过渡监听事件： 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数，如下案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {
事件触发css 动画,js处理css3 transitionend和animationend动画事件
weixin_33308577的博客
08-03 1051
之前的文章中已经测试了transform、transitionend、animationend在移动和pc端浏览器的前缀的兼容问题((针对pc和移动浏览器的前缀问题),如果知道了兼容问题，下面的代码就可以很好理解，现在整理了一下，写成一个简单的原声js函数，这个函数方法有：1、addTranEvent(elem,fn,duration)：用于绑定transtionend事件，处理掉多次执行的问题...
【JS深入学习】——animationend 事件兼容性说明
weixin_30764137的博客
01-11 451
animationend 1、兼容性 animationend只有两种形式：animationend和webkitAnimationEnd webkitAnimationEnd 中 w 一定要小写，animationend 中 e 要小写 2、事件执行次数 同一个元素上的动画，animationend只执行一次 3、兼容性 _thisEle.on("webkitA...
原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 c...
weixin_30642267的博客
03-09 1509
上图的 demo 主要讲的 是 csstransition的过渡回调函数transitionend事件； css3 的时代，css3--动画 一切皆有可能； 传统的js 可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件； transitionend事件和animationend事件标准的浏览器事件，...
transitionend 事件的兼容
weixin_34342992的博客
12-14 271
google ：webkitTransitionEnd firefox ：transitionend ie ： MSTransitionEnd 转载于:https://www.cnblogs.com/youzhuxiaoyao/p/5044661.html
JavaScript页面交互事件(上)
shuailong1993的博客
05-26 1036
事件三要素 1. 事件源: 绑定在谁身上的事件(和谁约定好) 2. 事件类型: 绑定一个什么事件 3. 事件处理函数: 当行为发生的时候, 要执行哪一个函数 // 1. 获取元素 var box = document.querySelector(‘div’) // 2. 给 div 绑定一个点击事件 // 事件源: div // 事件类型: click(点击行为) // 事件处理函数: 准备一个函数, 在点击行为触发的时候执行 // on 是我们绑定事件的一种方式 // click 叫做事件类型 // 当页
CSS3动画效果回调处理详解
09-25
因此，在开发时应该考虑到兼容性问题，通过添加特定的浏览器前缀（如-webkit-、-moz-、-o-、-ms-）或者使用现代的兼容性框架如PostCSS，来确保在所有主流浏览器上都能正常使用这些动画效果。 总的来说，CSS3动画...
浅谈CSS3动画的回调处理
09-24
同时，通过监听`transitionend`和`animationend`事件，我们可以在动画完成后执行回调函数，进一步增强交互体验。这使得CSS3动画不仅美观，而且具有更高的灵活性和控制性。在实际开发中，结合JavaScript的事件处理，...
自如大前端-web动画探索(一)
gyj129129的专栏
02-04 605
前端项目直面客户，为了更好的交互体验，免不了需要使用动画来增香提味。在此分享自如动画的尝试与探索。 一、简单的过渡效果transition 使用transition实现：位移、旋转、缩放、透明度等简单过渡效果。 **优点：**流畅、简单。 **缺点：**仅能实现简单动画，仅能监控动画结束（transitionend），无法实现用户交互。 transitionend（结束）事件监控： <template> <div class="box1" ref="box1" :class="{mov
web-animation-club:CSS控制的动画，包括transitionEnd，onTransitionEnd，animationend，onAnimationEnd事件和帧抛出。 带有跨浏览器方法的微型javascript库，用于处理CSS动画过渡回调和事件循环帧抛出。 :books::desktop_computer::mobile_phone:
05-06
网络动画俱乐部 ~0.8kb JavaScript库，带有跨浏览器方法，用于处理CSS ontransitionend和onanimationend事件。 又称为CSS动画和过渡回调。 快速使用 onceTransitionEnd wac方法的快速使用示例。 wac . onceTransitionEnd ( element ) . then ( function ( event ) { // ... do something } ) ; 现场演示 通过访问演示 安装 从dist文件 只需将dist文件夹中的web-animation-club.min.js javascript文件直接加载到HTML中web-animation-club.min.js 。 ... < script src =" https://webanimation.club/library/0.1.2/w
html5 transitionend animationend
qq_37207090的博客
07-06 241
CSS3 之动画及兼容性调优
weixin_34403693的博客
10-26 229
===================================================================== 动画集合：预览地址 ===================================================================== 　　由于CSS3动画对低版本的浏览器的支持效果并不是很好，特别是IE9及以下版本，更是无法...
animationend 事件
ssisse的博客
05-09 542
本文转自：http://www.runoob.com/jsref/event-animationend.html 在 CSS 动画结束后为 元素添加监听事件: var x = document.getElementById("myDIV"); // Chrome, Safari 和 Opera 代码 x.addEventListener("webkitAnim
animationend和transitionend多次执行的问题解决方案
羽筠的博客
09-18 3939
对于animationend事件来说的话，如果我们在外层添加这个事件监听，如果监听元素里面还有动画，则里面元素动画结束也会执行这个animationend事件。所以我们可以这样做： $('.ele').on('animationend webkitAnimationEnd',function(e){     if(e.target === this) {         console.log(...
vue 组件过渡动画
weixin_43294560的博客
02-15 2408
搭配标签消失/出现(v-show、v-if)的淡入淡出效果 1、在要过渡的标签外层包裹 <transition name='x> xx </transition> (1) 在style中写: //设置淡出,以及淡出时间 .x-enter,.x-leave-to{ opacity:0; } .x-enter-to,.x-leave{ o...
JavaScript 练手小技巧：animationend 事件及其应用小案例
九天翔龙的技术博客
06-13 2347
animationend 事件在 CSS 动画完成后触发。 CSS 动画播放时，会发生以下三个事件： animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发 在这三个事件函数中，均可以使用 event.animationName 属性，判断是在执行哪个动画。 个人觉得animationend 事件用的多一点。 案例1：标签的隐现 <button type=.
深入理解CSS过渡transition
51yunOA
04-12 526
https://www.cnblogs.com/xiaohuochai/p/5347930.html 前面的话 　　通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识 定义 　　过渡transition是一个复合属性，包...
vue2.x过渡(transition)与动画(animationend)
想搞全栈的前端
06-01 3557
transition Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 示例： <div id="demo"> <button v-on:click="show = !show"> Toggle </butto...
transitionend事件
最新发布
03-25
transitionend事件是在CSS过渡完成后触发的事件。它可以用于检测CSS过渡的结束，并在过渡结束后执行相应的JavaScript代码。 当元素的CSS属性经过过渡效果之后，就会触发transitionend事件。该事件可以用来执行一些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值