클릭했을 때 클래스를 추가하고 제거하는 방법

animate.css를 사용할 때 문제가 있습니다. 버튼 클래스를 클릭하면 어떻게 추가합니까? 애니메이션이 추가 된 후 - 제거 되었습니까?클릭했을 때 클래스를 추가하고 제거하는 방법

HTML :

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

자바 스크립트 sandbox에

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

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

연결합니다.

이

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

이 줄은 추가/요소에서 클래스를 제거 :

출처

2014-12-12 Aleksandr

당신이 애니메이션이 완료되면 감지 할 수있는 방법을 가지고 있나요? (이벤트와 같은) – MartaGom

메서드를 사용하여 기간 getComputedStyle (애니메이션 기간)을 계산할 수 있습니다. 그러나 그 때 나는 그 때 제거하는 방법을 알아낼 수 없다. – Aleksandr

내 대답을 편집했습니다. 그것을 확인해 보라. (더러운 해결책이지만 해결책이라고 생각한다.) – MartaGom

당신은 classList.toggle 방법을 사용할 수 있습니다. ONE (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'); 
}

출처

2014-12-12 13:55:19 MartaGom

정정과 긍정적 인 투표에 감사 ^^ – MartaGom

당신은 오해했습니다. 즉, 버튼을 클릭하면 먼저 애니메이션 클래스를 추가 한 다음 삭제할 애니메이션 클래스가 끝나야합니다. – Aleksandr

흠 ... 미안하지만 너를 이해하지 못했다. 나는 지금 생각하고있다. – MartaGom

클릭했을 때 클래스를 추가하고 제거하는 방법

답변

관련 문제