每次单击时如何使动画发生？

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");
});

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);
  }
}