如何让动画在每次点击时发生？

Question

我想让卡片在每次点击时都摇动，但它只在我第一次点击时发生。我想让每次点击都发生动画。

JavaScript:

var card = document.querySelector(".card");
card.addEventListener("click", function(){
    card.classList.add("shake");
});

CSS:

.shake{
    animation: move 1.3s ease-in;
}

Answer 1

问题是，当你再次点击时，该卡已经有了 shake 类，所以没有新的事情发生。在动画周期结束后删除该类，可以通过 animationend 事件。

var card = document.querySelector(".card");
card.addEventListener("click", function(){
    card.classList.add("shake");
});
card.addEventListener("animationend", function() {
    card.classList.remove("shake");
});

实例：

var card = document.querySelector(".card");
card.addEventListener("click", function(){
    card.classList.add("shake");
});
card.addEventListener("animationend", function() {
    card.classList.remove("shake");
});

.shake{
    animation: move 1.3s ease-in;
}

@keyframes move {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

<div class="card">This is the card</div>

Answer 2

另一个可能的答案是删除 shake 类，并将其添加回 setTimeout() 的 0ms. 这给浏览器一个改变，让它知道这个类在添加回来之前已经被删除了。

Javascript。

var card = document.querySelector(".card");
card.addEventListener("click", function(){
    card.classList.remove("shake");
    setTimeout(function(){card.classList.add("shake");},0);
});

Answer 3

因为你从来没有真正删除过这个类 .shake 你在卡片上添加的类，它负责你的卡片第一次的动画。.shake 类3秒后，再点击就可以摇卡了。你应该根据自己的需要改变3000的延时。

var card = document.querySelector(".card");
card.addEventListener("click", function(){
    card.classList.add("shake");
    setTimeout(function(){ card.classList.remove("shake") }, 3000);
});