javascript - 单击时如何添加和删除类

Question

使用animate.css 时出现问题。当您单击按钮类时添加动画并删除动画后，我该如何制作？

HTML:

<div></div>
<button>Click</button>

JavaScript

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

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

链接到 sandbox .

Answer 1

您可以使用classList.toggle 方法:

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