使用纯 JS 每 x 秒添加 CSS animation？

Question

我有一个 function 每 3 秒更新一次我主页上的文本，我希望文本在转换时淡入/淡出。 我有非常简单的关键帧动画来处理这个问题（淡入/淡出），但我很难找到解决这个问题的最佳方法。 有人可以给我一些指示吗？ 谢谢！

  changeHomeText() {
    var count = 0;
    const phrases = ["Phrase 1", "Phrase 2", "Phrase 3", "Phrase 4"];
    var text = document.getElementById('dyntext');
    text.innerHTML = phrases[0];

    setInterval(function() {
      if (count == phrases.length) {
        count=0;
      }
      text.innerHTML = phrases[count];
      count++;
    }, 3000);

  }

***CSS***

@keyframes fadeIn {
   from {opacity: 0;}
   to {opacity: 1;}
}
@keyframes fadeOut {
   from {opacity: 1;}
   to {opacity: 0;}
}

Answer 1

无论您如何为文本设置动画，这是一个 function 将永远工作并每 3 秒调用一次以更新文本

var count = 0;
var phrases = ["Phrase 1", "Phrase 2", "Phrase 3", "Phrase 4"];
function changeHomeText() {
    var text = document.getElementById('dyntext');
    text.innerHTML = phrases[count];
    if (count == phrases.length) {
        count=0;
    }
    text.innerHTML = phrases[count];
    count++;

    setTimeout(function () {
        changeHomeText();
    }, 3000);
}
changeHomeText();

你可以在 function 中做任何你想做的事，它会每 3 秒重复一次。