如何用JS和CSS实现点击按钮切换文本时先淡出再淡入？

你的问题根源很明确：最后一段代码里，document.getElementById('haikuText').style.opacity = 1是同步执行的——和设置opacity=0几乎同时完成，浏览器根本来不及渲染过渡动画，自然看不到效果。setTimeout是异步任务，会被放到事件队列里排队，主线程的同步代码会先跑完，相当于瞬间把opacity从0改回1，过渡逻辑直接被跳过了。

正确的思路是：等淡出动画完全结束、新俳句内容更新后，再触发淡入操作。下面是两种可行的修正方案：

方案1：把淡入逻辑整合进getRandomHaiku函数 #

function getRandomHaiku() {
  const haikuTextEl = document.getElementById('haikuText');
  // 从数据集中随机选俳句并赋值
  haikuTextEl.textContent = "新的俳句内容";
  // 内容更新后触发淡入
  haikuTextEl.style.opacity = 1;
}

document.getElementById('haikuButton').addEventListener('click', () => {            
  const haikuTextEl = document.getElementById('haikuText');
  haikuTextEl.style.opacity = 0;
  // 等待1秒淡出完成后，执行内容切换+淡入
  setTimeout(getRandomHaiku, 1000);
});

方案2：在setTimeout回调里完成全流程 #

document.getElementById('haikuButton').addEventListener('click', () => {            
  const haikuTextEl = document.getElementById('haikuText');
  haikuTextEl.style.opacity = 0;      
  setTimeout(() => {
    // 先更新俳句内容
    haikuTextEl.textContent = "新的俳句内容";
    // 再触发淡入
    haikuTextEl.style.opacity = 1;
  }, 1000); 
});

额外优化：用CSS类控制动画（更易维护） #

可以避免直接操作style，通过添加/移除类来控制过渡，代码更简洁：

.text-fade {
  opacity: 1;
  transition: opacity 1s;
}
.text-fade.hidden {
  opacity: 0;
}

document.getElementById('haikuButton').addEventListener('click', () => {            
  const haikuTextEl = document.getElementById('haikuText');
  haikuTextEl.classList.add('hidden');
  setTimeout(() => {
    haikuTextEl.textContent = "新的俳句内容";
    // 强制浏览器重绘（部分场景下需要，避免动画不触发）
    void haikuTextEl.offsetWidth;
    haikuTextEl.classList.remove('hidden');
  }, 1000); 
});

这里的void haikuTextEl.offsetWidth是为了强制浏览器进行一次重绘，确保类的移除能触发过渡动画——某些情况下，如果DOM更新和类操作太接近，浏览器会合并操作导致动画失效。

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