为了账号安全,请及时绑定邮箱和手机立即绑定

重新启动CSS3中的动画:是否有比删除元素更好的方法?

重新启动CSS3中的动画:是否有比删除元素更好的方法?

喵喔喔 2019-09-24 16:37:13
我有一个CSS3动画,需要单击才能重新启动。这是一个显示剩余时间的条形图。我正在使用scaleY(0)转换来创建效果。现在,我需要通过将条恢复到scaleY(1)并重新将其转到scaleY(0)来重新启动动画。我第一次尝试设置scaleY(1)失败,因为要花费相同的15秒时间才能将其恢复为完整长度。即使我将持续时间更改为0.1秒,我也需要延迟或链接scaleY(0)的分配,以使补充条完成。对于这么简单的任务,感觉太复杂了。我还发现了一个有趣的技巧,可以通过从文档中删除元素,然后重新插入其克隆来重新启动动画:http : //css-tricks.com/restart-css-animation/它可以工作,但是有更好的方法重新启动CSS动画吗?我正在使用Prototype和Move.js,但我不仅限于它们。
查看完整描述

3 回答

?
哈士奇WWW

TA贡献1799条经验 获得超6个赞

如果你有一些类CSS3动画,为exapmle .blink那么你可以removeClass一些元素和addClass这个元素想到的setTimeout与1个milisecond通过点击。


  $("#element").click(function(){

     $(this).removeClass("blink");


     setTimeout(function(){

       $(this).addClass("blink);

    },1 ///it may be only 1 milisecond, it's enough

  });


查看完整回答
反对 回复 2019-09-24
  • 3 回答
  • 0 关注
  • 755 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信