transition 失效是因为元素被移出文档流或重排导致浏览器丢弃过渡起始状态；应改用 visibility: hidden + opacity: 0 替代 display: none，并始终在基础类中声明 transition，避免动态增删或触发强制同步布局。
transition 失效是因为元素被移出文档流或重排触发
当 JavaScript 把元素从 DOM 中移走（比如 remove()、innerHTML = "" 或切换 display: none），再重新插入，浏览器会丢弃该元素的渲染上下文——包括 transition 的起始状态。此时即使 class 没变、样式规则完整，动画也会“跳变”。这不是 CSS 写错了，而是浏览器根本没机会记录“从哪开始过渡”。
用 visibility: hidden + opacity: 0 替代 display: none
display 切换会强制重排（reflow），彻底中断过渡链；而 visibility 和 opacity 是可动画属性，且不破坏盒模型。
-
visibility: hidden让元素不可见但保留布局占位，避免父容器重排 -
opacity: 0提供视觉隐藏，配合transition: opacity 0.3s实现淡出 - 两者组合后，切换 class 不会丢失过渡上下文，回退动画也能正常触发
避免 JS 直接操作 style.display 或 remove()
直接写 el.style.display = "none" 或调用 el.remove() 后再 parent.appendChild(el)，等于告诉浏览器：“这个节点已销毁，重来一遍”。过渡自然归零。
- 改用 class 控制显隐：
el.classList.add("is-hidden")，CSS 中定义.is-hidden { visibility: hidden; opacity: 0; } - 如果必须移除节点（如清理无用 DOM），先加退出动画类，等
transitionend事件后再执行remove() - 不要在添加动画类前读取
offsetHeight、getBoundingClientRect()等布局属性，否则会强制同步计算，清空过渡队列
transition 必须始终存在于 computed style 中
DevTools 的 Computed 面板里搜 transition，确认它不是 none 或 0s。常见干扰项：
- 父元素有
transform或will-change导致层叠上下文变化，间接抑制子元素过渡渲染 - 全局重置 CSS 中写了
* { transition: none !important; }，覆盖了你的声明 - 使用了
transition: all 0.3s，但目标属性（如height: auto）本身不可插值，整条过渡静默失败
最稳妥的做法是：把 transition 声明写在基础类里，永远不随状态切换而增删——哪怕只是动一个 opacity，也要确保它在元素生命周期内持续生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
