JS 및 Animate.css interval 문제

Question

피드에 animate.css를 사용하고 있습니다. 내가 사용하는 div라는 피드가 slideInLeft 클래스를 사용하고 3 초 동안 유지 된 다음 fadeOut 클래스를 사용합니다. 이 시점에서 div의 내용을 변경하고 다시 시작해야합니다. 여기에 내가있어 무엇 :

HTML :

<div id="feed"></div> 

JS :

var myCars=new Array("Saab","Volvo","BMW"); 
var wIndex = 0; 
$('#feed').text(myCars[wIndex]); 
setInterval(function() { 
    ++wIndex; 
    if (wIndex >= myCars.length) { 
     wIndex = 0; 
    } 
    $('#feed').removeClass('animated slideInLeft'); 
    $('#feed').addClass('animated fadeOut').addClass('hidden'); 
    $('#feed').text(myCars[wIndex]); 
    $('#feed').removeClass('animated fadeOut').removeClass('hidden'); 
    $('#feed').addClass('animated slideInLeft'); 
}, 3000); 

http://jsfiddle.net/tjfo/5a3SL/

두 번째 작품 배열의 첫 번째 요소에서 초기 변화를 제대로, 다음과 같은 모든 전환은 페이드 아웃없이 div의 텍스트를 변경하기 만하면됩니다. Animate.css는이 작업을 수행하는 기본 방법입니다. 누구나 제대로 작동하도록 만드는 방법을 알아낼 수 있습니까?

감사합니다.

Answer 1

다음 클래스를 적용하기 전에 animated 및 slideInLeft 클래스를 제거하려고합니다. 어쩌면 그 클래스들을 즉시 제거하고, 말하자면, 25ms의 타임 아웃에서 나머지 로직을 수행하십시오.

여기에 데모가 있습니다 : http://jsfiddle.net/5a3SL/3.

CSS로 애니메이션을 적용 할 때 이것은 새로운 클래스를 적용하기 전에 브라우저에서 새 클래스를 계산할 시간을 주어야하기 때문에 매우 일반적입니다. 그렇지 않으면 올바른 클래스가 새 클래스의 레이아웃에 존재하지 않습니다 제대로 움직이기.

정직하게 말하면 간단한 애니메이션의 경우 너무 많은 CSS처럼 보입니다 ... 애니메이션에 대해 가장 까다로운 점은 표준 선언뿐만 아니라 4 개의 다른 공급 업체 접두사에 대한 CSS 선언을 다시 작성해야한다는 것입니다.

이 문제를 처리하는 또 다른 방법은 적어도 애니메이션 (슬라이드 인)만큼 긴 루프의 끝 부분에 시간 초과를 설정하고 불필요한 클래스를 제거하는 것입니다.