使用 javascript 在每次点击时触发动画

Question

我正在尝试使用 CSS 动画翻转卡片。现在它可以工作，但只能在第一次单击按钮时使用。本质上，我的用例是：点击按钮，翻转卡片。点击按钮、翻转卡片等

function nextCard(){
    document.getElementById('card').addEventListener("click",flipTheCard());
}

function flipTheCard(){
    document.getElementById('card').classList.add('newCard');
}

动画通过向卡片添加 class 来实现。

.newCard {
  animation: flip 1.5s;
  transform-origin: 50% 100% 0;
}

我试过在动画后删除 class 并在每次点击时重新添加它，但这只会使它完全停止工作。

有什么想法或更好的方法吗？不确定添加和删除 class 动画是否是最佳实践。

谢谢！

Answer 1

在函数 flipTheCard

中使用 classList.toggle 而不是 classList.add

function flipTheCard(){ document.getElementById('card').classList.toggle('newCard'); }

Answer 2

只需用您的代码替换它，它就会正常工作（您期望的工作方式）

const card = document.getElementById('card')
function nextCard(){
 card.addEventListener("click",flipTheCard);
}

function flipTheCard(){ 
  card.classList.add('newCard');
  setTimeout(()=> {
    card.classList.remove('newCard')
  },1500)
}

下面是反映你问题的小例子

const btn = document.querySelector('.btn')

const box = document.querySelector('.box')

btn.addEventListener('click', () => {
  box.classList.add('animate')
  
  setTimeout(() => {
    box.classList.remove('animate')
  },1500)
})

.box{
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
  margin-top: calc(100vh - 60vh);
}

.box.animate{
    animation: spin 1.5s forwards;
}

@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

  <div class='box'></div>
  
  <button class="btn">click</button>

还要回答“如果添加和删除 class 动画是最佳做法”，这样做没有坏处。

使用 javascript 在每次点击时触发动画

trigger animation on each click using javascript

html

javascript

css

animation