transition在新元素上不触发，是因为样式未及时应用或初始状态缺失：需先加class再append、基础类显式声明起始值、避免scoped样式隔离失效、transition必须始终保留在基础类中。
transition在新元素上不触发，是因为样式没“赶上班车”
新创建的 document.createElement 元素插入 DOM 时，如果 CSS transition 规则还没被浏览器解析或尚未应用到该元素，动画就永远不会启动——不是代码错，是时机没对上。
典型错误是：先 appendChild，再加 class；或者用内联 style 动态写 transition，但此时元素已渲染完毕，浏览器跳过过渡初始化。
- 确保包含
transition的 CSS 类（比如.fade-in）已在<style></style>或外链样式表中定义，并且在 JS 执行前已加载完成 - 创建元素后，**先加 class，再 append 到 DOM**：
el.classList.add("fade-in"); container.appendChild(el); - 避免用
el.style.transition = "opacity 0.3s"动态赋值——它晚于首次渲染，无效 - 若必须 JS 注入样式，改用
document.styleSheets插入规则，或确保在requestAnimationFrame回调里操作
初始状态未声明，transition就“看不见起点”
即使样式已加载、元素已挂载，transition 仍可能静默失效：因为目标属性（如 opacity、transform）在基础类中没显式设初值，浏览器无法确定“从哪开始动”。
例如只写 .item { transition: opacity 0.3s; }，再通过 .item.active { opacity: 1; } 切换，但原始状态没定义 opacity，浏览器取默认值 opacity: 1，变化量为 0，直接跳过动画。
- 基础类必须显式声明起始值：
.item { opacity: 0; transition: opacity 0.3s; } - 功能类只负责终值：
.item.active { opacity: 1; } - 同理适用于
transform、height等——不能依赖“隐式 initial 值”作为动画起点
Vue scoped样式导致动态添加的DOM无过渡效果
在 Vue 单文件组件中，<style scoped></style> 会自动给选择器和元素加 data-v-xxxx 属性。JS 直接 appendChild 的节点没有这个属性，CSS 就匹配不上，transition 自然不生效。
- 不要去掉
scoped—— 这会破坏样式隔离 - 用
::v-deep(.dynamic-item)（Vue 2）或:deep(.dynamic-item)（Vue 3）穿透作用域 - 或者把过渡相关样式提到全局
<style></style>块，不加scoped - 验证方式：打开 DevTools，检查动态元素是否真有对应 class，且 computed style 中
transition不是none
transition声明被临时移除，动画就彻底断掉
很多人把 transition 写在切换用的 class 里（比如 .hidden { opacity: 0; transition: opacity 0.3s; }），结果一删这个 class，transition 就没了，后续加 .show 类时浏览器已丢失上下文，只能硬切。
过渡不是“开关”，而是持续监听器——它必须始终存在于计算样式中，才能捕获属性变化。
- 把
transition拆出来，固定在基础类（如.card）上：.card { transition: opacity 0.3s, transform 0.2s; } - 状态类只管值：
.card.is-hidden { opacity: 0; transform: translateY(-10px); } - 绝对不要在 JS 中写
el.style.transition = ""或通过 class 移除来“关闭”过渡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
