javascript – Animate.CSS重播？

我有一个使用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实现这一目标？

解决方法:

这只是一个猜测,但似乎jQuery没有“完成”删除它之前重新添加它.我知道这没有意义,但它是JavaScript的工作方式.它可以在第一个完成所有东西之前调用链中的下一个函数.我在Animate.CSS的网站上查了一下代码,看到他们在动画功能中使用了超时.你也许会尝试一样的.这是他们的代码：

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毫秒后添加的类.仍然不是100％那里,但它可能会让你更进一步.

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

标签：javascript,jquery,css,animate-css
来源： https://codeday.me/bug/20190729/1571334.html