JS函数动态添加元素后CSS Transition不生效，为何元素直接显示？

问题描述 #

Transition属性在部分场景下可正常工作，但执行以下操作时遇到异常：

• 创建span元素并插入到pre标签的innerHTML中
• span元素初始opacity为0，设置了1秒的transition过渡
• 插入后立即获取该span元素并将其opacity修改为1
• 所有操作在同一个函数内完成，代码示例如下：

代码片段 #

JavaScript

const lineText = document.getElementById("line-text");

function DisplayText() {
  lineText.innerHTML += "<span>TEXT!</span>";
  lineText.getElementsByTagName("span")[0].style.opacity = 1;
}
DisplayText();

CSS

span {
  opacity: 0;
  transition: 1s;
}

HTML

<pre id="line-text"></pre>

执行后元素直接瞬间显示，没有预期的淡入过渡效果，请问问题出在哪里？

原因分析 #

浏览器为了优化性能，会把同一事件循环内的DOM修改和样式变更合并执行，一次性完成重排重绘。你在插入span元素后立刻修改它的opacity，浏览器会直接计算最终的样式状态（opacity:1），完全忽略了初始的opacity:0状态，自然不会触发过渡动画。

解决方法 #

核心思路是让浏览器先完成新元素的初始样式渲染，再执行opacity修改操作，以下是几种可行方案：

方案1：使用requestAnimationFrame #

把样式修改放到浏览器下一次重绘前执行，确保初始样式已生效：

const lineText = document.getElementById("line-text");

function DisplayText() {
  lineText.innerHTML += "<span>TEXT!</span>";
  const span = lineText.getElementsByTagName("span")[0];
  requestAnimationFrame(() => {
    span.style.opacity = 1;
  });
}
DisplayText();

方案2：使用setTimeout #

借助setTimeout将样式修改延迟到下一个事件循环，给浏览器足够时间渲染初始状态：

const lineText = document.getElementById("line-text");

function DisplayText() {
  lineText.innerHTML += "<span>TEXT!</span>";
  const span = lineText.getElementsByTagName("span")[0];
  setTimeout(() => {
    span.style.opacity = 1;
  }, 0);
}
DisplayText();

方案3：通过添加类触发过渡 #

预先定义包含目标样式的类，插入元素后异步添加该类，代码更易维护：

修改后的CSS

span {
  opacity: 0;
  transition: 1s;
}
span.fade-in {
  opacity: 1;
}

修改后的JavaScript

const lineText = document.getElementById("line-text");

function DisplayText() {
  lineText.innerHTML += "<span>TEXT!</span>";
  const span = lineText.getElementsByTagName("span")[0];
  requestAnimationFrame(() => {
    span.classList.add("fade-in");
  });
}
DisplayText();

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