css transition在动态插入dom元素上不触发，根本原因是浏览器渲染时机与样式声明方式失配：transition必须写在基础类中并显式声明起始值（如.opacity: 0），且需先加class再append或强制重排；vue scoped样式需用:deep()穿透，避免匹配失效。
CSS transition 在动态插入的 DOM 元素上不触发，根本不是“兼容性”问题，而是浏览器渲染时机 + 样式声明方式双重失配。Safari、Firefox、旧 Edge 表现不一，但原因高度一致。
transition 必须写在基础类里，不能只写在切换类中
常见错误是把 transition 放在 .show 或 .active 这类功能类里：
- 一旦移除
.show，transition声明就没了，后续再加也无效 - 浏览器无法建立“从哪开始动”的上下文，尤其当初始值未显式声明时（比如
opacity默认是1，不是0） - 正确写法：基础类必须同时包含起始值和
transition，例如：.fade-item {<br> opacity: 0;<br> transition: opacity 0.3s ease;<br>}<br>.fade-item.active {<br> opacity: 1;<br>}
先加 class，再 append 到 DOM；或强制触发重排
动态创建元素后，如果先 appendChild() 再 classList.add("active")，多数浏览器（尤其是 Firefox）会跳过过渡——因为样式计算和布局阶段已合并完成，没留下“变化窗口”。
- 推荐做法：创建元素 → 立即加基础 class（如
fade-item）→ 再appendChild() - 若必须后加 class，需在添加后强制读取一个布局相关属性，例如：
el.offsetHeight或getComputedStyle(el).opacity，让浏览器确认当前状态 - 避免用
setTimeout(..., 0)，它在 Safari 和旧 Edge 中不可靠；requestAnimationFrame也不总奏效，尤其在低帧率设备上
scoped 样式或 JS 动态注入导致匹配失败
Vue 的 <style scoped></style> 会给选择器自动加 data-v-xxxx 属性，而 JS 直接 appendChild 的节点没有该属性，CSS 规则根本不会应用。
- 不要去掉
scoped—— 这会破坏样式隔离 - Vue 2 用
::v-deep(.dynamic-item)，Vue 3 用:deep(.dynamic-item)穿透作用域 - 或者把过渡相关样式（含基础类和
transition）抽到全局<style></style>块中 - 检查 DevTools 的 Elements 面板，确认动态元素真有对应 class，且 Computed 样式里
transition不是none
避免 all 简写、厂商前缀与 will-change 干扰
transition: all 0.3s 在 Safari 和旧 Edge 中极易失效，因为它们不支持对某些属性（如 background-position、自定义变量）做过渡，整个声明会被忽略。
- 明确列出可动画属性：
transition: opacity 0.3s, transform 0.3s - 老环境（IE10、Android 4.3 WebView）仍需前缀：
-webkit-transition、-moz-transition，且必须写在标准声明之前 -
will-change不是开关，滥用反而禁用硬件加速；Safari 15 及更早版本中，will-change: transform有时直接阻断transition，建议仅对高频动画元素启用，并移除后验证
真正难处理的点不在语法，而在“浏览器是否认为这次变化值得动画”——它取决于样式是否已就绪、起始值是否明确、DOM 是否已参与布局流程。跨浏览器稳定触发，核心就两条：基础类带 transition + 起始值，以及操作顺序卡准渲染节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
