Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

控制transition的暂停与播放

  CSS3中的transition一般只用作一些简单过度效果,它并没有提供像animation那么强大的功能,所以很多操作并没有完善。那么,如何用JavaScript控制transition的播放和暂停呢?虽然本身没有提供接口,如果只是模拟简单的播放和暂停咱也是做的到的。
  transition有个特性,它在播放过程中如果给元素的相关属性设置了其它值,那么它也是从当前播放位置开始过度到新的值而不是重新计算。另外transition的参数列表中有个delay参数,设置它可以使动画延迟一段时间后再开始。把这两个东西结合起来就可以实现暂停了。 <style>
div {font:32px/48px 微软雅黑;position:absolute;top:10px;left:10px;}
</style>
<div>次碳酸钴</div>
<input value="播放" id="play" type="button" style="margin-top:100px;" />
<script>
onload=function(){
  var s=document.querySelector("div").style;
  document.querySelector("input").onclick=function(){
    switch(this.value){
      case "播放":
        s.left="500px";
        s.transition="left 10s linear";
        this.value="暂停";
        break;
      case "暂停":
        s.transitionDelay="99999s"; //后面的动画会暂停这么多秒
        s.left="-99999px"; //这个动画会暂停前面设置的秒数
        this.value="播放";
        break;
    };
  };
};
</script>
  虽然也不是绝对的暂停,不过我觉得应该不会有人把页面停留着那么久。其实transition也只是实现交互的临时动画,如果真有要长久播放和暂停的应该用animation。这个解决办法就算一种投机取巧吧。。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^