使用javascript在每次点击时触发动画[重复]答案

【问题标题】：trigger animation on each click using javascript [duplicate]使用javascript在每次点击时触发动画[重复]
【发布时间】：2021-09-26 22:24:37
【问题描述】：

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

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

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

动画通过向卡片添加一个类来工作。

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

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

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

谢谢！

【问题讨论】：

document.getElementById('card').addEventListener("click",flipTheCard()); 在此不应调用 flipTheCard。只有引用应该被传递。这可能是错字吗？
您也可以添加动画吗？我强烈建议您切换使用transition，然后切换类而不是添加它。

标签： javascript html css animation

【解决方案1】：

只需将其替换为您的代码，它就可以正常工作（您期望它的工作方式）

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>

还要回答“如果添加和删除动画类是最佳实践”，这样做没有害处。

【讨论】：

完美，这正是我所追求的。 setTimeOut 是我所缺少的。谢谢

【解决方案2】：

在flipTheCard函数中使用classList.toggle代替classList.add

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

【讨论】：

这很好，但似乎只有每第二次点击才有效。