Как добавить и удалить класс при нажатии

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

Эта линия добавить/удалить класс из элемента.

ПОДРОБНЕЕ ДЛЯ ОДНОГО (Dirty) РЕШЕНИЕ:

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