анимация. css л oop 2 разных анимации

Question

У меня недавно возникла проблема с animate. css в моем последнем проекте.

По сути, я пытаюсь обновлять текст абзаца на моей веб-странице каждые пять / десять секунд с помощью jQuery, но я не хочу просто менять текст. Мне бы хотелось, чтобы предыдущий текст исчезал с использованием анимации. css fadeOut , а новый - с использованием анимации fadeIn .

В настоящее время я использую этот код (это только пример):

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

Очевидно, sometext каждый цикл отличается для простоты.

Сначала этот код доставил мне некоторые проблемы, потому что анимация была не плавной, а мерцающей. Я пытался замедлить процесс, спя программу, используя setTimeout между классом add и remove, потому что я думал, что удаление класса до окончания анимации css может вызвать проблему, но все еще мерцает.

Answer 1

Вы можете вложить некоторые методы setTimeOut в функцию setInterval.
Таким образом, вы можете контролировать время каждого шага анимации.

Кроме того, поскольку animate. css использует animation свойство, вам также нужно определить animation-duration и animation-fill-mode в CSS.

animation-duration указывает, сколько времени должен занять цикл анимации.
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>