4.11日音讯,控制transition的暂停与播放

　　

　　4.11日音讯,控制transition的暂停与播放，CSS3中的transition一般只用作一些简单过度效果，它并没有提供像animation那么强大的功能，所以很多操作并没有完善。那么，如何用JavaScript控制transition的播放和暂停呢？虽然本身没有提供接口，如果只是模拟简单的播放和暂停咱也是做的到的。

　　transition有个特性，它在播放过程中如果给元素的相关属性设置了其它值，那么它也是从当前播放位置开始过度到新的值而不是重新计算。邯郸网站建设首创网络小编告诉大家，另外transition的参数列表中有个delay参数，设置它可以使动画延迟一段时间后再开始。把这两个东西结合起来就可以实现暂停了。<style>

　　div{font:32px/48px微软雅黑;position:absolute;top:10px;left:10px;}

　　</style>

　　<div>邯郸网站建设</div>

　　<inputvalue="播放"id="play"type="button"style="margin-top:100px;"/>

　　<script>

　　onload=function(){

　　vars=document.querySelector("div").style;

　　document.querySelector("input").onclick=function(){

　　switch(this.value){

　　case"播放":

　　s.left="500px";

　　s.transition="left10slinear";

　　this.value="暂停";

　　break;

　　case"暂停":

　　s.transitionDelay="99999s";//后面的动画会暂停这么多秒

　　s.left="-99999px";//这个动画会暂停前面设置的秒数

　　this.value="播放";

　　break;

　　};

　　};

　　};

　　</script>

　　虽然也不是绝对的暂停，不过我觉得应该不会有人把页面停留着那么久。其实transition也只是实现交互的临时动画，如果真有要长久播放和暂停的应该用animation。这个解决办法就算一种投机取巧吧。