Firefox中添加DOM后立即触发CSS过渡的解决方案

核心思路是强制浏览器先完成初始元素的渲染，再触发样式变化，避免浏览器合并DOM操作导致过渡失效。

保留原CSS： #

div {
  opacity: 0;
  transition: all 0.2s;
}
.show {
  opacity: 1;
}

修改后的JavaScript实现： #

var div = document.createElement("div")
document.body.append(div);
// 强制浏览器触发重排，读取任意布局属性即可
div.offsetWidth; // 无需使用返回值，仅用于触发重排
div.classList.add("show");

原理说明： #

浏览器会批量处理DOM修改和样式更新以优化性能。如果直接在添加元素后立刻添加类，浏览器会合并「添加元素（初始opacity:0）」和「添加类（opacity:1）」两个操作，最终直接渲染opacity:1的状态，跳过过渡。

读取offsetWidth这类布局属性时，浏览器必须先完成当前DOM的渲染计算才能返回正确值，这就强制它先应用初始样式。之后再添加show类，样式变化会被识别为需要触发过渡的状态变更，在Chrome和Firefox中都能稳定生效，且无任何人为延迟。

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