javascript - 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 的工作方式。它可以在第一个函数的所有内容完成之前调用链中的下一个函数。我浏览了 Animate.CSS 网站上的代码，发现他们在动画功能中使用了超时。你也可以试试。这是他们的代码:

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

它所做的与您所做的完全一样，只是它等待动画完成，然后删除类。这样当另一个类被重新添加时，它对标签来说是真正的"new"。这是一个稍微修改过的函数:

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

请注意两件事:首先，此代码允许您更改获取动画的元素。其次，您删除在 1300 毫秒后添加的类。仍然不是 100%，但它可能会让你走得更远。

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