Problema de intervalo JS e Animate.css

Question

Estou usando animate.css para um feed.Eu tenho uma div chamada feed que usa a classe slideInLeft, permanece por 3 segundos e depois usa a classe fadeOut.Neste ponto, preciso alterar o conteúdo da div e começar de novo.Aqui está o que eu tenho:

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/

A mudança inicial do primeiro elemento da matriz para o segundo funciona corretamente, desaparece e desliza para dentro.Todas as transições a seguir apenas alteram o texto no div sem desaparecer e deslizar para dentro.Animate.css é o método preferido para concluir esta tarefa.Alguém pode ajudar a descobrir como fazê-lo funcionar corretamente?

Obrigado!

Answer 1

Acho que você está querendo remover o animated e slideInLeft aulas antes de aplicar as aulas subsequentes.Talvez remova essas classes imediatamente e, em seguida, em um tempo limite, digamos, 25ms, faça o resto da lógica.

Aqui está uma demonstração: http://jsfiddle.net/5a3SL/3.

Ao animar com CSS, isso é bastante comum, pois você precisa dar tempo ao navegador para calcular o novo layout sem essas classes antes de aplicar novas classes, caso contrário, o estado correto não existirá no layout para que a nova classe seja animada corretamente.

Além disso, honestamente parece muito CSS para uma animação simples...a coisa mais complicada sobre animações é ter que reescrever suas declarações CSS para quatro prefixos de fornecedores diferentes, bem como a declaração padrão.

Outra maneira de lidar com isso seria definir um tempo limite no final do loop que seja pelo menos tão longo quanto a animação (o slide-in) e remover as classes desnecessárias.