我有一个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
});
添加回答
举报
0/150
提交
取消