javascript - 在javascript中的文本之间切换时如何添加淡入和淡出

Question

我的 JAVASCRIPT 代码下面有每 2.5 秒在 2 个单词之间变化，我想在它使用的数组中的单词之间的过渡中添加淡入淡出。我知道我需要使用 Jquery，但如何在这个递归函数中实现它？有什么想法吗？

var text = ["first", "second"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 2500);

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
}

.banner-right h2 {
  font-size: 50px;
  font-weight: 300;
  color: #ffffff;
  margin: 15px 0 45px 0;
}

<h2 id="changeText">Data Scientist</h2>

Answer 1

由于您使用的是原生 JavaScript，因此您可以使用 CSS 转换和 classList。

类似于:

CSS

#changeText {
    opacity: 1;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0 !important;
}

JavaScript

function change() {
    elem.classList.add('hide');
    setTimeout(function () {
        elem.innerHTML = text[counter];
        elem.classList.remove('hide');
        counter++;
        if (counter >= text.length) {
            counter = 0;
        }
    }, 500);
}

演示:

var text = ["first", "second"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 2500);

function change() {
    elem.classList.add('hide');
    setTimeout(function () {
        elem.innerHTML = text[counter];
        elem.classList.remove('hide');
        counter++;
        if (counter >= text.length) {
            counter = 0;
        }
    }, 500);
}

#changeText {
    opacity: 1;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0 !important;
}

<h2 id="changeText">Data Scientist</h2>

注意:我在 CSS 中使用了 !important，因为 opacity: 1; 与 ID 选择器一起应用时优先于类选择器。