css3中transition和animation的回调处理

弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬＿┬)看来还是要再接再励啊w(ﾟДﾟ)w

言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transitionend事件和animationend事件,如果我们需要在动画执行完毕后,

进行一些其他操作,只需要给这两个事件添加相应的回调函数即可.

如果你css基础不够,请看这里: 张鑫大大关于css3动画的简介

如果你向深入研究这个问题,请看这里:蜗牛大大讲transition事件处理

值得注意的是当transition动画修改了元素的N个属性值时,就会触发N次transitionend事件,因此需要定义一个handleTransitionEndfn函数来处理多次触发的问题,

代码如下:

var handleTransitionEndfn=function(ele,fn,duration){
			var flag=0;
			//每次触发transitionend事件都会执行callback()
			var callback=function(){
				fn();
				flag=1;
			}
			ele.addEventListener("webkitTransitionEnd", function(){
					callback();
					//防止winphone不能触发事件
					setTimeout(callback(), duration);
			}, false)
    }

下面是transition回调处理的示例:

html结构:

<div class="trans_box"></div>

css样式:

<style>
		*{
			margin:0;
			padding:0;
		}
		.trans_box{
			width: 100px;
			height: 100px;
			margin:100px;
			background-color:orange;
			-webkit-transition:all 1s ease-out;
		}
</style>

js代码:

<script type="text/javascript">
    window.onload=function(){
	var trans_box=document.querySelector(".trans_box");
			trans_box.onclick=function(){
				trans_box.style.backgroundColor="pink";
				trans_box.style.webkitTransform="translateX(200px) scale(2) rotate(360deg)";
			}
			var handleTransitionEndfn=function(ele,fn,duration){
				var flag=0;
				// 当transition事件完成后需要执行的函数;
				var callback=function(){
					if(!flag){
						fn();
						flag=1
					}
				};
				ele.addEventListener("webkitTransitionEnd", function(){
						callback();
						// 考虑兼容winphone
						setTimeout(callback, duration);
				},false)
			};
			function transitionEndfn(){
				alert("transition事件成功加载!")
			}
			handleTransitionEndfn(trans_box,transitionEndfn,"2s");
	}
</script>

下面animation回调处理示例:

html结构同上下

css样式如下:

<style>
		*{
			padding:0;
			margin:0;
		}
		.anim_box{
			width: 100px;
			height: 100px;
			background-color: lightgreen;
			margin:100px;
			transition:all 2s ease;
		}
		@keyframes move{
			0%{
				opacity: 1;
			}
			50%{
				opacity: 0.8;
				-webkit-transform:rotate(360deg);
			}
			100%{
				background-color: pink;
				opacity: 0.3;
			}
		}
</style>

js代码:

<script>
    var anim_box=document.querySelector(".anim_box");
    anim_box.onclick=function(){
		anim_box.style.webkitAnimation="move 2s";
	}
    anim_box.addEventListener("webkitAnimationEnd", function(){
		alert("animation事件加载成功!")
	}, false)
</script>