JS- und Animate.css-Intervallproblem

Question

Ich verwende animate.css für einen Feed.Ich habe ein Div namens „feed“, das die slideInLeft-Klasse verwendet, 3 Sekunden lang verbleibt und dann die fadeOut-Klasse verwendet.An diesem Punkt muss ich den Inhalt des Div ändern und von vorne beginnen.Folgendes habe ich:

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/

Der anfängliche Wechsel vom ersten Element im Array zum zweiten funktioniert ordnungsgemäß: Ausblenden, Einschieben.Bei allen folgenden Übergängen wird lediglich der Text im Div geändert, ohne dass ein Ausblenden oder Einblenden erfolgt.Animate.css ist die bevorzugte Methode zum Ausführen dieser Aufgabe.Kann mir jemand helfen, herauszufinden, wie es richtig funktioniert?

Danke!

Answer 1

Ich denke, Sie möchten das entfernen animated Und slideInLeft Klassen vor der Anwendung nachfolgender Klassen.Vielleicht entfernen Sie diese Klassen sofort und in einer Auszeit von sagen wir mal, 25ms, erledigen Sie den Rest der Logik.

Hier ist eine Demo: http://jsfiddle.net/5a3SL/3.

Beim Animieren mit CSS kommt dies recht häufig vor, da Sie dem Browser Zeit geben müssen, das neue Layout ohne diese Klassen zu berechnen, bevor Sie neue Klassen anwenden. Andernfalls ist im Layout nicht der richtige Status vorhanden, damit die neue Klasse ordnungsgemäß animiert werden kann.

Außerdem scheint das ehrlich gesagt zu viel CSS für eine einfache Animation zu sein ...Das Schwierigste an Animationen ist, dass Sie Ihre CSS-Deklarationen für vier verschiedene Herstellerpräfixe sowie die Standarddeklaration neu schreiben müssen.

Eine andere Möglichkeit, damit umzugehen, besteht darin, am Ende der Schleife ein Timeout festzulegen, das mindestens so lang ist wie die Animation (das Slide-In), und dann die unnötigen Klassen zu entfernen.