transition必须定义在常态选择器中而非:hover等伪类里，否则移出时无过渡；高度过渡需具体数值，display和height:auto不可插值；transition应设于基础类且避免all，须用computed面板验证生效状态。
transition写在:hover里却只单向生效
鼠标悬停时有动画、移出时直接跳变，说明transition被错误地塞进了:hover规则。浏览器只在伪类激活时才“看到”这个声明，一旦离开，过渡上下文就没了。
- ✅ 正确做法：
.btn { transition: opacity 0.2s; }+.btn:hover { opacity: 0.7; } - ❌ 错误写法：
.btn:hover { opacity: 0.7; transition: opacity 0.2s; } - 用 DevTools 的 Computed 面板确认
transition-property是否始终存在，而不是只在:hover下出现
JS切换class后transition完全不触发
调用 classList.remove("fade-out") 再 classList.add("fade-in")，会导致 transition 声明瞬间丢失——浏览器没“起始值”可插值，只能硬切终态。
- 把
transition抽到一个永不被移除的基础类里，例如：.animatable { transition: opacity 0.4s, transform 0.3s; } - 状态类只管属性值：
.animatable--hidden { opacity: 0; transform: translateY(10px); } - 别在 JS 里直接写
el.style.opacity = "0"，这会覆盖 CSS 中的transition声明
height或display切换时过渡无效
height: auto 和 display: none/block 都不可插值：前者没有确定像素起点，后者是离散状态，浏览器根本没法算中间帧。
- 显隐推荐组合：
opacity: 0/1+pointer-events: none（控制交互） +visibility: hidden（占位） - 如果高度不确定，得用 JS 先读
getComputedStyle(el).height，再设为内联style.height，才能启动过渡 - 避免用
transition: all—— 某个属性不支持过渡，整条声明不会报错，但该属性就静默失效
Computed面板里transition显示为none或0s
DevTools Styles 面板看到 transition: all 0.3s 不代表它真生效；必须去 Computed 面板查 transition-property、transition-duration 是否有值且非 none 或 0s。
- 检查是否被更高优先级规则覆盖，比如全局重置里写了
* { transition-timing-function: linear !important; } - 确认没误用不可过渡属性：
display、z-index、position本身不能过渡（但top/left可以） - 用
getComputedStyle(el)手动读取目标属性当前值，确认不是auto或initial—— 过渡需要明确起点
过渡不是“按一下就动”的开关，它得一直在线；最常被忽略的，是把它当成一次性配置，而不是持续存在的样式契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
