Question

我试图用JavaScript再次触发CSS动画。尝试了很多技巧，没有任何作用。

步骤：

<canvas class="shake">已添加到document.body
shake动画有效！
按"Shake"按钮重新添加CSS。
动画不再被触发。

代码

https://jsbin.com/pasitic/edit?css,js,console,output

代码非常简单。我希望那里有一个非常简单和体面的解决方案。我使用的是vanilla JavaScript。

更新

解决了，并使用工作代码更新了示例。

Answer 1

试试这个：

...
$btn.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("clicked");

  $canvas.className = "shake"; // Doesn't trigger the animation!
});

$canvas.addEventListener("animationend", function(e) {
  $canvas.className = "";
});

...

它添加了一个事件侦听器，用于删除在动画结束后触发的类名。

Answer 2

如果删除某个类并再次添加，则无法播放动画。

您可以在setTimeout函数中包含添加“shake”类，但延迟很小，动画也可以。

$canvas.className = "";

setTimeout(function(){ 
  $canvas.className = "shake";
}, 50);

您还可以使用以下内容：

$canvas.classList.remove("shake");
void $canvas.offsetWidth;
$canvas.classList.add("shake");

$canvas.offsetWidth;将触发重排。

您可以在此处详细了解： https://css-tricks.com/restart-css-animation/

Answer 3

添加一些延迟的超时工作。我添加了等于animation-duration的延迟，但添加任何延迟都可以。

$btn.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("clicked");
  $canvas.className = 'shake';
  setTimeout(function(){ $canvas.className = '';  }, 500);
});

使用JavaScript事件再次触发CSS动画

3 个答案: