如何实现所有JavaScript过渡动画的平滑效果？

你的问题很典型——CSS transition 并非万能，它只能对可动画的CSS属性生效，而你用到的innerHTML替换、display: none/block都是非动画属性，所以全局加transition自然没效果。下面给你一套无需逐个元素调整的解决方案：

核心思路 #

1. 把display: none/block替换成opacity + visibility组合（这两个是可动画属性）
2. 文本切换通过先淡出→更新内容→再淡入的流程实现
3. 给需要过渡的元素统一设置transition规则，避免重复代码

具体实现步骤 #

第一步：添加基础CSS样式 #

先给所有需要过渡的元素（包括body）设置统一的过渡规则，同时定义用于淡入淡出的类：

/* 全局过渡基础规则，按需调整属性和时长 */
body, .transition-element {
  transition: all 0.5s ease;
}

/* 淡出状态 */
.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* 淡入状态 */
.fade-in {
  opacity: 1;
  visibility: visible;
}

/* 初始化时隐藏不需要显示的元素 */
#thHeader, #ftHeader, #ffHeader {
  opacity: 0;
  visibility: hidden;
}

这里我们用.transition-element类标记所有需要过渡的元素，避免给全局所有元素加transition（可能影响性能）。

第二步：修改JavaScript逻辑 #

我们需要调整文本切换的逻辑，加入过渡等待，同时替换display为opacity+visibility：

var text = 0;
const secHeader = document.getElementById('secHeader');
const imageBox = document.getElementById('ImageBox');
const thHeader = document.getElementById('thHeader');
const ftHeader = document.getElementById('ftHeader');
const ffHeader = document.getElementById('ffHeader');
const body = document.body;

// 封装文本切换的淡入淡出函数
function updateText(element, newText) {
  // 先淡出
  element.classList.add('fade-out');
  // 等待过渡完成后更新内容并淡入
  setTimeout(() => {
    element.innerHTML = newText;
    element.classList.remove('fade-out');
    element.classList.add('fade-in');
  }, 500); // 时长要和CSS transition的时长一致
}

function changeText() {
  text += 1;

  switch(text) { // 换成switch也不影响可读性，看你偏好
    case 0:
      updateText(secHeader, "Click anywhere to begin.");
      break;
    case 1:
      updateText(secHeader, "Are you ready?");
      break;
    case 2:
      updateText(secHeader, "Let's begin then...");
      break;
    case 3:
      updateText(secHeader, "You're about to experience a journey you'll never forget.");
      break;
    case 4:
      imageBox.classList.add('fade-out');
      body.style.background = "black";
      break;
    case 5:
      thHeader.classList.remove('fade-out');
      thHeader.classList.add('fade-in');
      break;
    case 6:
      updateText(thHeader, "You must be very curious then...");
      break;
    case 7:
      thHeader.classList.add('fade-out');
      ftHeader.classList.remove('fade-out');
      ftHeader.classList.add('fade-in');
      break;
    case 8:
      updateText(ftHeader, "We can show you something...");
      break;
    case 9:
      ftHeader.classList.add('fade-out');
      ffHeader.classList.remove('fade-out');
      ffHeader.classList.add('fade-in');
      break;
    case 10:
      updateText(ffHeader, "Let's see...");
      break;
    case 11:
      ffHeader.classList.add('fade-out');
      body.style.background = "linear-gradient(to right, #0f2027, #203a43, #2c5364)";
      break;
  }
}

关键细节说明 #

• 为什么用opacity+visibility？：display: none会让元素脱离文档流，无法过渡；而opacity:0只是视觉隐藏，元素仍占据空间，配合visibility:hidden可以防止元素被点击，同时实现平滑过渡。
• 文本切换的延迟：setTimeout的时长必须和CSS中transition的时长一致，这样才能保证过渡完成后再更新内容，避免闪烁。
• 统一类管理：用.fade-in/.fade-out类来控制状态，比直接操作style属性更清晰，也方便后续维护。

这样调整后，无论是背景色变化、元素显示隐藏，还是文本内容切换，都能实现平滑的过渡效果，而且不需要逐个给span元素加效果~

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