Problème d'intervalle JS et Animate.css

Question

J'utilise animate.css pour un flux.J'ai un div nommé feed qui utilise la classe slideInLeft, reste pendant 3 secondes, puis utilise la classe fadeOut.À ce stade, je dois modifier le contenu du div et recommencer.Voici ce que j'ai :

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/

Le changement initial du premier élément du tableau au second fonctionne correctement, disparaît, glisse.Toutes les transitions suivantes modifient simplement le texte du div sans fondu sortant, glissez vers l'intérieur.Animate.css est la méthode préférée pour accomplir cette tâche.Quelqu'un peut-il m'aider à comprendre comment le faire fonctionner correctement ?

Merci!

Answer 1

Je pense que vous cherchez à supprimer le animated et slideInLeft classes avant d’appliquer les classes suivantes.Peut-être supprimer ces classes immédiatement, puis dans un délai d'attente, par exemple, 25ms, faites le reste de la logique.

Voici une démo : http://jsfiddle.net/5a3SL/3.

Lors de l'animation avec CSS, c'est une chose assez courante car vous devez laisser au navigateur le temps de calculer la nouvelle mise en page sans ces classes avant d'appliquer de nouvelles classes, sinon l'état correct n'existera pas dans la mise en page pour que la nouvelle classe s'anime correctement.

De plus, honnêtement, cela semble trop CSS pour une simple animation...la chose la plus délicate à propos des animations est de devoir réécrire vos déclarations CSS pour 4 préfixes de fournisseurs différents ainsi que la déclaration standard.

Une autre façon de gérer cela serait de définir un délai d'attente à la fin de la boucle qui est au moins aussi long que l'animation (le slide-in) et de supprimer ensuite les classes inutiles.