Javascript 单击时如何添加和删除类

使用animate.css时出现问题。当你点击按钮的时候我该怎么做？类被添加，动画被移除之后

HTML:

---

链接到。

您可以使用

类列表。切换方法：

document.querySelector('.element').classList.toggle('class');

此行用于从元素中添加/删除类

一个（脏）解决方案的更多详细信息：

var button = document.getElementsByTagName('button')[0];
var div = document.getElementsByTagName('div')[0];

button.addEventListener('click', function() {
  div.classList.add('animated', 'bounceInDown');
  setTimeout(deleteClass, 1000);

});

function deleteClass(){
    console.log("Test");
    div.classList.add('animated', 'bounceInDown');
    div.classList.remove('animated', 'bounceInDown');
}

谢谢你的更正和你误解的赞成票。我的意思是，当你点击按钮时，你必须先为动画添加一个类，然后在动画类结束后删除。嗯。。。对不起，我不明白你的意思。我在想，这个很脆弱。它假定动画正好持续1秒。每次更改动画持续时间时，您必须记住返回此代码并修复常量1000。最好使用一个事件通知您动画结束。您是对的。。。但我不知道其他解决办法。您可以发布一个带有事件的解决方案吗？（我希望不要看起来很烦人：我的英语不是很好）你有没有办法检测动画是否完成了？（与事件类似）方法可用于计算getComputedStyle动画的持续时间（动画持续时间）。但我当时不知道如何删除。我编辑了我的答案。使用
animationEnd
事件查看它（我认为这是一个解决方案，尽管是一个肮脏的解决方案）。看到了，非常感谢！这才是你真正需要的！
document.querySelector('.element').classList.toggle('class');

var button = document.getElementsByTagName('button')[0];
var div = document.getElementsByTagName('div')[0];

button.addEventListener('click', function() {
  div.classList.add('animated', 'bounceInDown');
  setTimeout(deleteClass, 1000);

});

function deleteClass(){
    console.log("Test");
    div.classList.add('animated', 'bounceInDown');
    div.classList.remove('animated', 'bounceInDown');
}