transition不会自动触发新插入dom元素的入场动画，因为它是状态驱动而非时间驱动，新元素直接渲染终态样式而无起始态，需手动通过强制reflow或requestanimationframe锁定起始态再修改终态。
transition 不会自动触发新插入 DOM 元素的入场动画，必须手动“触发”状态变化，否则它只会静默应用最终样式，跳过过渡过程。
为什么新元素插入后 transition 没反应
transition 是「状态驱动」而非「时间驱动」：它只在元素已有样式（起始态）的前提下，监听后续 CSS 属性变更（终态），然后补间中间帧。而动态插入的元素一上来就带终态样式（比如 opacity: 1、transform: translateY(0)），没有「从哪来」的过程，浏览器直接渲染最终结果，transition 完全不介入。
常见错误现象包括：
- 用
document.createElement创建元素并立即设className后 append，元素瞬间出现，无过渡 - JS 设置
element.style.opacity = '1'后，再改'0.2'，但第一次设值时已覆盖初始态，无法构成「变化起点」 - CSS 中写了
transition: opacity 0.3s，但没配对应的初始opacity值（比如父级或重置样式里是opacity: 1，新元素继承而来）
正确触发入场动画的三步法
核心思路：让元素先以「不可见+可过渡属性」的状态挂载，再用一次微小的 DOM 重排（reflow）或 class 切换，触发 transition 计算起始态。
- 插入前确保元素有明确的初始样式（如
opacity: 0、transform: translateY(20px)），可通过 class 或style.cssText预设 - 用
document.body.appendChild(element)插入后，**立刻读取一个强制 layout 的属性**（例如getComputedStyle(element).opacity），这会迫使浏览器计算当前样式，锁定起始态 - 紧接着修改目标样式（如
element.classList.add('in')或element.style.opacity = '1'），transition 才会从刚才锁定的起始态开始过渡
示例代码：
const el = document.createElement('div');
el.className = 'fade-item';
el.textContent = 'Hello';
// 先插入
document.body.appendChild(el);
// 强制读取，触发 layout，锁定起始态
getComputedStyle(el).opacity;
// 再触发动画
el.classList.add('active');
用 requestAnimationFrame 绕过 reflow 死区
某些场景下（比如批量插入、SSR 后 hydrate），直接读取 getComputedStyle 可能因渲染队列未就绪而失效。此时用 requestAnimationFrame 更可靠：
- 插入元素后不立即操作，而是用
requestAnimationFrame延迟到下一帧 - 在回调里再读取样式 + 修改终态，保证 DOM 已挂载且样式已计算
- 比 setTimeout 更精准，避免帧丢失或延迟抖动
关键代码片段：
document.body.appendChild(el);
requestAnimationFrame(() => {
getComputedStyle(el).opacity; // 锁定起始态
el.classList.add('active');
});
Vue/React 等框架里的等效处理
框架内部已封装了类似逻辑，但你仍需注意边界：
- Vue 的
<transition></transition>要求元素被v-if或v-show控制，不能直接appendChild；否则 Vue 不接管，transition 类不会注入 - React 中若用
useState控制显隐，需确保初始 state 是隐藏态（如false），且对应 CSS 类（如.enter）定义了起始样式 - 若绕过框架直接操作 DOM（比如第三方库注入），transition 依然需要手动触发，框架不干预这部分
最易被忽略的一点：transition 的属性名必须和你实际修改的 CSS 属性完全一致——比如你用 JS 改 element.style.opacity，但 CSS 里写的是 transition: all 0.3s，看似覆盖，实则部分浏览器（尤其 Safari）对 all 的解析不稳定，建议明确写出 transition: opacity 0.3s。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
