JS 和 Animate.css 间隔问题

Question

我正在使用 animate.css 作为提要。我有一个名为 feed 的 div，它使用 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 似乎太多了......关于动画最棘手的事情是必须为 4 个不同的供应商前缀以及标准声明重新编写 CSS 声明。

处理这个问题的另一种方法是在循环结束时设置一个至少与动画（滑入）一样长的超时，然后删除不必要的类。