小编典典

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

javascript

我有一个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,但我不仅限于它们。


阅读 308

收藏
2020-05-01

共2个答案

小编典典

只需animation通过JavaScript 将属性设置为"none",然后设置将属性更改为的超时,即可""再次从CSS继承。

2020-05-01
小编典典

在超时没有必要,使用回流以应用更改:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}
#animated {
  position: absolute;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}
<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>
2020-05-07