transition写在会增删的状态类中导致动画失效，主因是移除类后过渡上下文丢失、起始值未显式声明、vue scoped样式不匹配或dom插入时机不当；须将transition和初始值置于永不移除的基础类中，并确保选择器生效、渲染时机正确。
transition写在状态类里，一删就断
动画失效最常见原因：把transition声明塞进了会增删的类里，比如.show或.hidden。一旦classList.remove("show")，浏览器立刻丢失过渡上下文，后续再加.active也回天乏术——它已经没“起点”可参考了。
必须把transition抽到一个永不被移除的基础类中，例如：
.fade-item {
opacity: 0;
transition: opacity 0.3s ease;
}
.fade-item.active {
opacity: 1;
}
- 基础类
.fade-item负责提供起始值和过渡契约 - 状态类
.active只管终值，不碰transition - 动态创建元素后，先
el.classList.add("fade-item")，再container.appendChild(el)
初始值没显式声明，浏览器默认“不动”
只写transition: opacity 0.3s，却不写opacity: 0，浏览器取默认opacity: 1，变化量为 0，直接跳过插值。这不是 bug，是规范行为。
所有参与过渡的属性都得在基础类里显式写出初始值：
-
transform不能只靠translateX(100%)，得配transform: translateX(-100%)作起点 -
height过渡必须用具体像素值，height: auto不可插值 - 用 DevTools 的 Computed 面板确认
opacity、transform等当前值不是auto或initial
Vue scoped样式导致选择器根本匹配不上
Vue 的<style scoped></style>会给选择器自动加data-v-xxxx属性，而 JS 动态appendChild的节点没有这个属性，CSS 规则压根不会生效。
别删scoped——破坏样式隔离得不偿失。改用穿透写法：
- Vue 2：
::v-deep(.dynamic-item) { transition: opacity 0.3s; } - Vue 3：
:deep(.dynamic-item) { transition: opacity 0.3s; } - 或者把过渡相关样式（含基础类）挪到全局
<style></style>块里
打开 Elements 面板，确认动态元素真有对应 class，且 Computed 中transition-property不是none。
append之后才加class，浏览器已错过渲染窗口
先container.appendChild(el)，再el.classList.add("active")，Firefox 和 Safari 极易跳过过渡——因为布局阶段已完成，浏览器没留“变化窗口”。
强制重排虽能补救，但要慎用：
- 推荐做法：创建元素 → 立即加基础 class → 再
appendChild - 若必须后加状态类，可在
add后读一次el.offsetHeight或getComputedStyle(el).opacity - 避免
setTimeout(..., 0)，它在 Safari 和旧 Edge 中不可靠
真正难缠的从来不是语法写错，而是 transition 必须从元素挂载那一刻起就“在线”，且起始值、选择器匹配、渲染时机三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
