Cuestión de intervalo de JS y Animate.css

Question

Estoy usando animate.css para un feed.Tengo un feed DIV llamado que usa utiliza la clase SlideNleft, permanece durante 3 segundos, luego usa la clase Fadeo.En este punto, necesito cambiar el contenido del div y comenzar de nuevo.Esto es lo que tengo:

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/

El cambio inicial del primer elemento en la matriz a la segunda funciona correctamente, desaparece, desliza. Todas las siguientes transiciones simplemente cambian el texto en el div que no se desvanecen, desliza. Animate.css es el preferidoMétodo para completar esta tarea.¿Alguien puede ayudar a descubrir cómo hacer que funcione correctamente?

¡Gracias!

Answer 1

Creo que está buscando eliminar las clases de animated y slideInLeft antes de aplicar clases posteriores. Tal vez eliminen esas clases de inmediato, luego en un tiempo de espera de decir, 25ms, haga el resto de la lógica.

Aquí hay una demostración: http://jsfiddle.net/5a3sl/3 .

Al animar con CSS, esta es una cosa bastante común, ya que necesita dar el tiempo del navegador para calcular el nuevo diseño sin esas clases antes de aplicar nuevas clases, de lo contrario, el estado correcto no existirá en el diseño de la nueva clase para Animar adecuadamente.

Además, que honestamente parece demasiado CSS para una animación simple ... lo más difícil de las animaciones es tener que volver a escribir sus Declaraciones de CSS para 4 prefijos de proveedores diferentes, así como la Declaración Estándar.

Otra forma de manejar esto sería establecer un tiempo de espera al final del bucle que es al menos siempre que la animación (la diapositiva) y retire las clases innecesarias,