如何用纯JavaScript实现innerHTML内容的平滑切换效果？

没问题！我来帮你搞定纯JavaScript的平滑文本切换效果，替代原来直接替换innerHTML的生硬感～我们可以用两种常见的方式实现类似jQuery中fast/slow的淡入淡出效果，一起来看看：

这种方式利用浏览器原生的CSS过渡特性，代码简洁且性能优异，是最常用的实现方式。

首先给目标元素添加CSS过渡样式：

#Artikel-Middle-Uberschrift-Changetext {
  opacity: 1;
  /* 这里的0.3s对应动画时长，可调整：0.2s类似fast，0.5s类似slow */
  transition: opacity 0.3s ease-in-out;
}

/* 淡出状态的类 */
#Artikel-Middle-Uberschrift-Changetext.fade-out {
  opacity: 0;
}

然后修改你的JavaScript代码，先让元素淡出，完成后切换文本再淡入：

var text = ["Flugverspatung und Flugverfruhung", "Flugannullierung und Flugumleitung", "Flugzeugmangel und Nichtbeforderung", "Flug verpasst", "Gepack-Problematik"];
var counter = 0;
var elem = document.getElementById("Artikel-Middle-Uberschrift-Changetext");
var intervalId = setInterval(change, 2000);

function change() {
  // 先添加淡出类，触发CSS过渡
  elem.classList.add('fade-out');
  
  // 等待过渡结束后执行文本切换（时间要和CSS的transition时长一致）
  setTimeout(() => {
    // 更新文本内容
    elem.innerHTML = text[counter];
    counter++;
    if (counter >= text.length) {
      counter = 0;
    }
    
    // 移除淡出类，触发淡入过渡
    elem.classList.remove('fade-out');
  }, 300);
}

原理说明 #

通过给元素添加/移除fade-out类，利用CSS的opacity过渡实现平滑的淡入淡出，在淡出完成的瞬间切换文本，视觉上就会呈现流畅的文本切换效果。

如果需要更精细的动画控制（比如自定义动画曲线、添加额外动画效果），可以用requestAnimationFrame手动实现动画逻辑：

var text = ["Flugverspatung und Flugverfruhung", "Flugannullierung und Flugumleitung", "Flugzeugmangel und Nichtbeforderung", "Flug verpasst", "Gepack-Problematik"];
var counter = 0;
var elem = document.getElementById("Artikel-Middle-Uberschrift-Changetext");
var intervalId = setInterval(change, 2000);
var isAnimating = false; // 标记是否有动画在进行，避免叠加

function change() {
  // 如果当前有动画未完成，跳过本次触发
  if (isAnimating) return;
  
  // 先执行淡出动画，完成后切换文本再淡入
  fadeOut(elem, () => {
    elem.innerHTML = text[counter];
    counter++;
    if (counter >= text.length) {
      counter = 0;
    }
    fadeIn(elem);
  });
}

// 淡出动画函数
function fadeOut(element, callback) {
  isAnimating = true;
  let opacity = 1;
  const startTime = performance.now();
  const duration = 300; // 动画时长，可调整

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    opacity = 1 - (elapsed / duration);
    
    if (opacity <= 0) {
      opacity = 0;
      element.style.opacity = opacity;
      isAnimating = false;
      callback(); // 动画完成后执行回调
      return;
    }
    
    element.style.opacity = opacity;
    requestAnimationFrame(animate);
  }
  
  requestAnimationFrame(animate);
}

// 淡入动画函数
function fadeIn(element) {
  isAnimating = true;
  let opacity = 0;
  const startTime = performance.now();
  const duration = 300;

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    opacity = elapsed / duration;
    
    if (opacity >= 1) {
      opacity = 1;
      element.style.opacity = opacity;
      isAnimating = false;
      return;
    }
    
    element.style.opacity = opacity;
    requestAnimationFrame(animate);
  }
  
  requestAnimationFrame(animate);
}

原理说明 #

用requestAnimationFrame逐帧更新元素的opacity值，手动控制淡入淡出的过程，这种方式可以灵活调整动画的速度、曲线，甚至添加位移、缩放等额外效果。

• 调整动画速度：方案一中修改CSS的transition时长，方案二中修改duration参数即可（比如0.2s对应fast，0.5s对应slow）
• 避免动画冲突：确保定时器的间隔（2000ms）大于动画时长，防止下一次切换触发时上一次动画还未完成
• 初始状态检查：确保目标元素的初始opacity为1，避免页面加载时出现异常透明的情况

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