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声明。

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