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

Question

我最近在我的最新项目中遇到了 animate.css 的问题。

基本上我想要做的是使用 jQuery 每五/十秒刷新我网页上的段落文本，但我不想简单地更改文本。 我希望之前的文本使用 animate.css淡出动画消失，而新文本使用淡入动画出现。

目前我正在使用这个代码（只是一个例子）：

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

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

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

Answer 1

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

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

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

 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>