弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬＿┬)看来还是要再接再励啊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>