Gestione dell'intervallo JS e Animate.css

Question

Sto usando animate.css per un feed.Ho un div nome feed che usa utilizza la classe SlideIlinFT, rimane per 3 secondi, quindi utilizza la classe Fadeout.A questo punto, ho bisogno di cambiare il contenuto del div e ricominciare.Ecco cosa ho:

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/

La modifica iniziale dal primo elemento nell'array al secondo funziona correttamente, svanendo, scorrere. Tutte le seguenti transizioni cambiano il testo nel div senza dissolvenza, scorrere. Animate.css è il preferitoMetodo per completare questa attività.Qualcuno può aiutare a capire come farlo funzionare correttamente?

Grazie!

Answer 1

Penso che tu stia cercando di rimuovere le classi animated e slideInLeft prima di applicare le classi successive. Magari rimuovere quelle classi subito, quindi in un timeout di dire, 25ms, fai il resto della logica.

Ecco una demo: http://jsfiddle.net/5a3sl/3 .

Durante l'animazione con CSS questa è una cosa abbastanza comune poiché è necessario dare il tempo del browser per calcolare il nuovo layout senza quelle classi prima di applicare nuove classi, altrimenti lo stato corretto non esiste nel layout per la nuova classe a correttamente animato.

Inoltre, che onestamente sembra troppo CSS per un'animazione semplice ... La cosa più difficile delle animazioni deve scrivere le dichiarazioni CSS per 4 diversi prefissi del fornitore e la dichiarazione standard.

Un altro modo per gestire questo sarebbe quello di impostare un timeout alla fine del ciclo che è almeno finché l'animazione (lo slide-in) e rimuovere le classi non necessarie, allora.