Проблема с интервалом JS и Animate.css

Question

Я использую animate.css для фида.У меня есть div с именем feed, который использует класс slideInLeft, остается в течение 3 секунд, затем использует класс fadeOut.На данный момент мне нужно изменить содержимое 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/

Первоначальное изменение от первого элемента массива ко второму работает корректно, исчезает, скользит внутрь.Все следующие переходы просто изменяют текст в div без затухания, скользят внутрь.Animate.css является предпочтительным методом для выполнения этой задачи.Кто-нибудь может помочь разобраться, как заставить это работать должным образом?

Спасибо!

Answer 1

Я думаю, вы хотите удалить animated и slideInLeft классы перед применением последующих классов.Может быть, сразу удалить эти классы, а затем по истечении таймаута сказать, 25ms, проделайте остальную логику.

Вот демо-версия: http://jsfiddle.net/5a3SL/3.

При анимации с помощью CSS это довольно распространенная вещь, поскольку вам нужно дать браузеру время для вычисления нового макета без этих классов, прежде чем применять новые классы, в противном случае в макете не будет правильного состояния для правильной анимации нового класса.

Кроме того, это, честно говоря, кажется слишком большим количеством CSS для простой анимации...самая сложная вещь в анимации - это необходимость переписывать ваши объявления CSS для префиксов 4 разных поставщиков, а также стандартное объявление.

Другим способом справиться с этим было бы установить тайм-аут в конце цикла, который, по крайней мере, такой же длины, как анимация (слайд-ин), и затем удалить ненужные классы.