JSとAnimate.css間隔の問題

Question

フィードのanimate.cssを使用しています。SlideInLeftクラスを使用するDIV名前付きフィードは3秒間残り、次にフェードアウトクラスを使用します。この時点で、DIVの内容を変更して再度開始する必要があります。これが私が持っているものです：

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/

アレイ内の最初の要素から2番目の要素への最初の変化が正しく機能し、フェードアウトしてスライドさせます。以下のすべての遷移はすべてフェードアウトのない、スライドさせてDIVのテキストを変更します。animate.cssが推奨されますこのタスクを完了する方法誰もがそれを正しく動作させる方法を理解するのを助けることができますか？

ありがとう！

Answer 1

後続のクラスを適用する前に、animatedクラスとslideInLeftクラスを削除していると思います。これらのクラスをすぐに削除してから、SAYのタイムアウトで、25ms、Logicの残りの部分を実行します。

これはデモです： http://jsfiddle.net/5a3sl/3

CSSとの間でアニメーション化新しいクラスを適用する前にこれらのクラスなしで新しいレイアウトを計算するためにブラウザの時間を与える必要があるため、これはかなり一般的なものです。それ以外の場合は、新しいクラスのレイアウトに正しい状態が存在しません。適切にアニメートします。

また、シンプルなアニメーションのための正直なCSSのように思われる...アニメーションについての最も厄介なことは、4つの異なるベンダープレフィックスのためのあなたのCSS宣言と標準宣言のためのあなたのCSS宣言を再書き込む必要があります。

これを扱うもう1つの方法は、少なくともアニメーション（スライドイン）の長さであるループの最後にタイムアウトを設定し、その場合は不要なクラスを削除することです。