强制重排（如 void el.offsetWidth）是确保新插入元素 transition 生效的可靠方案，它让浏览器固化初始样式作为起始帧；Web Animations API 则绕过渲染时机依赖，直接驱动动画。
直接在插入 DOM 后立刻加 class 触发 transition，90% 的情况会跳过动画、直接显示终态——这不是浏览器 bug，而是渲染机制的必然结果。
为什么刚插入的元素加类不触发 transition
浏览器对新插入元素的样式计算是“批处理”的：如果 element 插入后立即设置 className 或修改 style，整个过程（插入 → 计算初始样式 → 应用终态）可能被压缩在单次样式刷新帧内。此时浏览器根本没机会识别“从 0 到 1”的变化，opacity: 0 → opacity: 1 被当作初始渲染值直接应用。
Firefox 尤其严格，requestAnimationFrame 在它里面也常失效；Chrome 表面能用 setTimeout(, 0)，但本质是靠微小延迟触发了重排，不可靠。
- 元素未声明初始
opacity（比如只靠 class 控制），浏览器无法推断起始值 -
display: none状态下插入，再切display: block+opacity: 1，依然跳帧——因为display变更会清空所有过渡上下文 - 用
getComputedStyle(el).opacity读取后立刻改值，也不一定管用：若读取发生在样式未固化前，返回的仍是默认值（如''或'1'）
强制重排（offsetWidth）是最小依赖的可靠方案
核心逻辑：让浏览器“确认”当前样式已生效，把初始状态钉死，再改值才能构成“变化”。offsetWidth 是最轻量的强制重排手段（读布局属性会触发同步样式计算和布局）。
立即学习“前端免费学习笔记（深入）”；
const el = document.createElement('div');
el.className = 'box'; // 假设 .box { opacity: 0; transition: opacity 0.3s; }
document.body.appendChild(el);
// 强制重排，固化 opacity: 0 的起始态
void el.offsetWidth;
// 此时再切换状态，transition 才会生效
el.classList.add('in'); // .in { opacity: 1; }
- 不用引入任何 polyfill 或 API，兼容 IE9+
- 比
requestAnimationFrame更早介入渲染流程，Firefox 下也稳定 - 避免使用
offsetHeight/scrollLeft等可能触发额外布局的属性（offsetWidth最安全） - 注意：不能省略
void或赋值操作，否则 JS 引擎可能优化掉该语句
Web Animations API 是替代 transition 的现代解法
如果你的目标只是“插入即淡入”，element.animate() 绕过了 CSS transition 对渲染时机的依赖，直接走合成器管线，零配置、跨浏览器一致。
const el = document.createElement('div');
el.className = 'box';
document.body.appendChild(el);
el.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 300, easing: 'ease-out' }
);
- 不依赖 CSS 类、不关心初始 display 或 visibility
- 动画由浏览器独立线程驱动，主线程卡顿不影响播放
- 支持
cancel()、playbackRate等精细控制，适合复杂交互场景 - IE 不支持，但 Chrome/Firefox/Safari/Edge 均已稳定支持多年
真正容易被忽略的是：**过渡是否生效，不取决于你用了什么延迟函数，而取决于浏览器是否明确知道“起点在哪”**。强制重排不是 hack，是向渲染引擎显式声明“请把此刻的样式当做起始帧”；而 Web Animations 是彻底换一条路，绕过这个博弈。选哪个，取决于你是否需要复用现有 CSS 动画体系，还是追求绝对可控与可预测。
