使⽤css动画也可以回调函数
在做项⽬中经常会遇到使⽤动画的情况。以前的情况是⽤js写动画,利⽤setTimeout函数或者questAnimationFrame()实现⽬标元素的动画效果。
js控制css3动画触发虽然后者解决了刷新频率和移动频率同步的问题,但是因为js频繁地操作dom带来的额外开销和复杂的计算公式使得⼤多数开发者对⽤原⽣js动画望⽽却步⽽取道各种插件动画。
这其实也是html的⼀块软肋,在⽹站上做动画,⽆论就效果还是性能,JS还是差了flash很多步。所以当html5和css3的标准出现后,这种情况转变成了多数⼈从js复杂的动画转向了稍微容易的css动画。
css3为我们提供了很棒的api来实现之前需要费很⼤的功夫才能实现的功能。只需要很简单的代码,任何⼈都可以快速地学会css动画。下⾯是⼀个动画沿Y轴的上下游⾛的例⼦(此处均已webkit内核为默认标准,实际情况需要⾃⼰兼容):
transform:
.mydiv {
width:100px;
height:100px;
background:red;
-webkit-transition: all 2s;
}
.newClass{
-webkit-transform: translateY(100px)
}
animation:
@-webkit-keyframesmymove {
from {top:0px;}
to {top:200px;}
}
.mydiv {
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation:mymove 2s forwards; /*Safari and Chrome */
}
以上是⽬前css动画经常⽤到的两种写法。就简洁单的动画来说⼀般倾向使⽤第⼀种transoform,如果需要在做复杂的转换,可以使⽤第⼆种animation⽅法,通过在不同的运动帧上写下该帧的状态实现。
很多情况下我们需要知道动画何时完成,以及什么完成后需要做什么。也就是说需要⼀个动画完成的回调函数。在js动画中你不需要担⼼不到回调函数,因为动画本⾝全依赖于js,回调只不过是⼀个普
通的函数⽽已。⾸先,卤煮也是习惯性地⽤js思维思考这个问题。既然知道动画的变化时间,那么可以⽤延时解决回掉的问题。下⾯是延时的⽅法
//css中代码可以看到动画持续2s
var delay= 2000;
setTimtout(function(){
dosomething()
},delay);
上⾯的⽅法是不难理解,延时⼀个函数执⾏,延时的时长就是动画变化的时间,这样,看起来当动画完成时会⽴即执⾏函数。但是,这种⽅
式存在着很多严重的缺陷。第⼀、setTimeout函数和css动画不⼀定是⼀致的。因为动画开始的时间和setTimeout的时间严格来说不是⼀直的,所以会出现要么函数提前执⾏,要么动画提前结束。第⼆、js代码和css代码耦合了。delay的时间要随时跟着css内的时间⾛,如果css 代码改变或者js代码改变,两边都必须花时间修复同步(也就是改成为⼀致时间)这增加了⼯作量。第三、多个动画会带来更多
的代码量和不确定因素。因为每⼀个定时器针对的是单独的动画元素,所以动画元素⼀多起来就必须添加更多的代码。第四、⽆法处理多个动画元素同⼀时间结束的情况。等。。。。
以上只是部分发现的缺点,对于复杂的动画来说,延时函数是完全不能适应。那么有⽅法处理动画的回调吗?答案当然是肯定的。⽽且很简单,跟之前绑定点击事件是⼀样的。js提供了css3中两种动画的结束事件。我们利⽤它们,可以很容易捕获到动画的完成情况。
transitionEnd
alert('Transform animation has done!');
});
animationend
alert('Animation has done!....');
});
我们可以看到,它们对于开发者来说⼀点也不陌⽣。不论是⽤法还是字⾯名称,都使得我们能够⼀⽬了然。其实说了啰⾥吧嗦⼀⼤堆,这篇博客主要就是两个事件名称⽽已。下⾯是它们的兼容效果。⼤多数浏览器都⽀持了这两种事件,基本上⽀持css3动画的浏览器就会⽀持这两种事件。
补充⼀点:animationend只是animation变化事件中的⼀种。你应该能想到其他的变化状态,没错就是:
animationstart,animationiteration.利⽤这三种状态时间,我们可以随⼼所欲的控制变化中的动画效果。尤其是animationiteration事件,能够让我们在动画变化过程中插上⼀⼿。
WEB前端学习交流21 598399936
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论