Question

我正在使用animate.css作为Feed。我有一个名为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制作动画时这是一个相当常见的事情，因为在应用新类之前需要给浏览器时间来计算没有这些类的新布局，否则新类的布局中将不存在正确的状态适当的动画。

另外，对于一个简单的动画来说，老实说看起来太多了......关于动画的最棘手的事情就是不得不重新编写4个不同供应商前缀的CSS声明以及标准声明。

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

JS和Animate.css间隔问题

1 个答案: