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
    );
}

这样做与您正在做的完全一样，只是它等待动画完成，然后删除类。这样，当重新添加另一个类时，它对标签来说确实是“新的”。这是一个稍微修改过的函数：

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

注意两件事：首先，这段代码可以让你改变动画的元素。其次，删除1300毫秒后添加的类。仍然不是100％那里，但它可能会让你更进一步。

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

Answer 2

我认为这里的问题是，当我删除类时，它正在快速添加类。以下是我解决这个问题的方法：

（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代码正在快速删除和添加类。无论此代码的工作原理如何。

Answer 3

在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 4

如果您愿意，也可以试一下这个支持animate.css动画的javaScript端开发。这是一个使用示例。

class ProductAdmin(admin.ModelAdmin):
    list_display = ('name',  'price',)
    order_by = ('price',)

    def price(self, obj):
        try:
            price = Price.objects.filter(variation__product=obj)[0].price
        except (ValueError, IndexError):
            None
        else:
            return format_html('${0}', price)

看看here

Answer 5

我的答案是添加/删除 css class并添加色调的技巧：

$('#Box').removeClass('animated').hide().delay(1).queue(function() { 
        $(this).addClass('animated').show().dequeue();
});

您也可以在没有隐藏/显示方法的情况下进行测试：

$('#Box').removeClass('animated').delay(1).queue(function() { 
        $(this).addClass('animated').dequeue();
});

我在chrome中填充它可以顺利运行，但它在FF中有更多意外延迟，所以你可以测试这个js超时：

$('#Box').removeClass('animated');  
setTimeout(function(){ 
    $('#Box').addClass('animated');
}, 1);

Answer 6

这个解决方案依赖于 React useEffect，而且相当干净，因为它避免了直接操作类名。

它并没有真正回答 OP 问题（似乎使用 jQuery），但它可能对许多使用 React 和 Animate CSS 库的人仍然有用。

  const [repeatAnimation, setRepeatAnimation] = useState<boolean>(true);

  /**
   * When the displayedFrom changes, replay the animations of the component.
   * It toggles the CSS classes injected in the component to force replaying the animations.
   * Uses a short timeout that isn't noticeable to the human eye, but is necessary for the toggle to work properly.
   */
  useEffect(() => {
    setRepeatAnimation(false);
    setTimeout(() => setRepeatAnimation(true), 100);
  }, [displayedFrom]);

  return (
    <div
      className={classnames('block-picker-menu', {
        'animate__animated': repeatAnimation,
        'animate__pulse': repeatAnimation,
      })}
  ...
  )

Animate.CSS重播？

6 个答案: