如何为JavaScript定时切换的文本添加透明度过渡效果

问题根源 #

• CSS选择器大小写不匹配：HTML元素ID为changeText，你写的CSS选择器是#changetext，ID为大小写敏感，导致样式未全局生效
• JS操作对象错误：代码中修改的是#s2main元素的透明度，而非目标文本元素#changeText
• 过渡逻辑缺失：仅首次渲染时透明度从0变为1，后续没有将透明度重置为0的步骤，无法触发后续淡入动画
• 样式合并问题：同一执行栈内连续修改透明度会被浏览器合并样式，导致过渡不生效
• 定时器时长冲突：1s的切换间隔没有预留400ms的过渡执行时间，导致动画被截断，看起来总时长不符

修复后完整代码 #

CSS #

#changeText {
  opacity: 0;
  transition: opacity 400ms ease;
}

JavaScript #

var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
// 初始化显示第一条文本
elem.innerHTML = text[counter];
elem.style.opacity = 1;
counter++;

// 总切换间隔 = 文本停留时长1000ms + 过渡时长400ms，可自行调整停留时长
var inst = setInterval(change, 1400);

function change() {
  // 触发淡出
  elem.style.opacity = 0;
  // 等淡出动画完成后更新文本并触发淡入
  setTimeout(() => {
    elem.innerHTML = text[counter];
    elem.style.opacity = 1;
    counter++;
    if (counter >= text.length) {
      counter = 0;
      // clearInterval(inst); 单轮循环结束后停止则打开此注释
    }
  }, 400)
}

HTML #

<div id="changeText"></div>

内容的提问来源于stack exchange，提问作者tru_shar