Animate.CSS重播？

Question

我有一个使用Animate.CSS的动画，如果用户愿意的话，我想要重放，但是我尝试的内容不起作用。以下是代码：

HTML:

    <div class="img-center">
       <img src="path.jpg" class="feature-image animated rotateInDownRight" />
    </div>
       <p class="textcenter">&nbsp;</p>
    <div class="img-center">
       <a href="#" id="replay">Replay</a>
    </div>

JS:

var $j = jQuery.noConflict();
$j("#replay").click(function() {
    $j('.feature-image').removeClass('animated rotateInDownRight').addClass('animated rotateInDownRight');
});

我知道脚本本身工作，因为我可以看到它发生在Firebug，但动画不会再次动画。如何使用Animate.CSS实现这一目标？

Answer 1

这只是猜测，但似乎jQuery在将类添加回之前还没有“完成”删除类。我知道这是没有道理的，但这就是JavaScript的工作方式。它可以调用链中的下一个函数，然后再完成第一个函数中的所有内容。我浏览了一下动画. use的网站上的代码，发现它们在动画功能中使用了超时。你也可以试试。这是他们的代码：

function testAnim(x) {
    $('#animateTest').removeClass().addClass(x);
    var wait = window.setTimeout( function(){
        $('#animateTest').removeClass()},
        1300
    );
}

它所做的与您正在做的事情完全一样，只是它等待动画完成，然后移除类。这样，当另一个类被重新添加时，它实际上是标记中的“新”类。下面是一个稍微修改过的函数：

function testAnim(elementId, animClasses) {
    $(elementId).addClass(animClasses);
    var wait = window.setTimeout( function(){
        $(elementId).removeClass(animClasses)},
        1300
    );
}

注意两件事:首先，这段代码将允许您更改获得动画的元素。其次，删除在1300毫秒之后添加的类。仍然没有百分之百在那里，但它可能会让你走得更远。

应该注意的是，如果对象上已经有一些动画类，那么它可能会破坏这个JS。

Answer 2

在animate.css issue#3找到了正确的答案

var $at = $('#animateTest').removeClass();  
//timeout is important !!
setTimeout(function(){ 
   $at.addClass('flash') 
}, 10);

实际上，更简单的版本也可以避免使用JQuery。

el.classList.remove('animated','flash');  
//timeout is important !!
setTimeout(function(){ 
   el.classList.add('animated','flash');
}, 10);

Answer 3

我相信这里的问题是，当我移除类时，它正在快速地添加类。以下是我如何解决这个问题的方法：

(HTML与上面的问题相同)。

JS:

var $j = jQuery.noConflict();

window.setTimeout( function(){
   $j('.feature-image').removeClass('animated rotateInDownRight')},
1300);


$j("#replay").click(function() {
    $j('.feature-image').addClass('animated rotateInDownRight');
});

我认为正在发生的是，jQuery代码正在快速地移除和添加类。不管这段代码工作的原因是什么。