javascript - animate.css循环2个不同的动画

Question

我最近在最新元素中遇到了 animate.css 问题。

基本上，我想做的是使用 jQuery 每五/十秒刷新一次网页上的段落文本，但我不想简单地更改文本。我希望使用 animate.css fadeOut 动画让前一个文本消失，并使用 fadeIn 动画显示新文本。

目前我正在使用此代码(仅是一个示例):

setInterval(function() {
  $("#myp").addClass('fadeOut');
  $("#myp").text(sometext);
  $("#myp").removeClass('fadeOut');
  $("#myp").addClass('fadeIn');
  $("#myp").removeClass('fadeIn');
}, 5000);

显然，为简单起见，sometext 每个周期都不同。

起初，这段代码给我带来了一些问题，因为动画不流畅，而且闪烁。我尝试通过在添加类和删除类之间使用 setTimeout 休眠程序来减慢进程，因为我认为在 css 动画结束之前删除该类可能会导致问题，但实际上仍然闪烁。

Answer 1

您可以在 setInterval 函数中嵌套一些 setTimeOut 方法。
这样你就可以控制动画每一步的时间。

此外，由于 animate.css 使用 animation 属性，因此还需要确定 animation-duration 和 animation-fill-mode在 CSS 中。

animation-duration 指定动画周期需要多长时间。
animation-fill-mode 带有“forwards”将防止元素在动画完成后重置为之前的状态。

var sometext = "another text";

setInterval(function() {
  
    var myp = $("#myp");
    myp.addClass('fadeOut');
  
    setTimeout(function() {
      myp.text(sometext);
      myp.removeClass('fadeOut');
      myp.addClass('fadeIn');
      
      setTimeout(function() {
         myp.removeClass('fadeIn');
      }, 1000);
      
    }, 1000);
  
}, 5000);

#myp {
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myp">lorem ipsum dolor sit</div>