Animate.CSS 重播？

Posted 2023-03-06

【中文标题】Animate.CSS 重播？

【英文标题】：Animate.CSS Replay?

【发布时间】：2012-09-06 02:54:07

【问题描述】：

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

【问题讨论】：

这个重复的 question 有一个替代答案，可以避免 setTimeout。

【参考方案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。

【讨论】：

谢谢！我碰巧遇到了相同的代码，并发布了相同的答案供其他人阅读。点击帖子并看到你的答案 =>

【参考方案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 代码正在快速删除和添加类。不管这个代码工作的原因是什么。

【参考方案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);

【参考方案4】：

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

 //Select the elements to animate and enjoy!
 var elt = document.querySelector("#notification") ;
 iJS.animate(elt, "shake") ;
 //it return an AnimationPlayer object
 //animation iteration and duration can also be indicated.
 var vivifyElt = iJS.animate(elt, "bounce", 3, 500) ;
 vivifyElt.onfinish = function(e) 
     //doSomething ...;
 
 // less than 1500ms later...changed mind!
 vivifyElt.cancel();

看看here

【参考方案5】：

我的答案是 添加/删除 css class 的技巧，并带有色调延迟：

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

您也可以在没有 hide/show 方法的情况下对其进行测试：

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

我填充它在chrome 中运行顺利，但它在FF 中出现更多意外延迟，因此您可以测试这个 js 超时：

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

【参考方案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,
      )
  ...
  )