transition必须写在原始类而非:hover中，且所有过渡属性需在原始类中显式声明初始值，否则移出时因无目标值导致过渡中断。
直接在原始类名里写 transition，移出时过渡中断，是因为你没给「离开状态」留够样式依据——浏览器不知道该过渡回哪去。
为什么 hover 移出时 transition 不生效
常见写法是只在 :hover 里加 transition 或只改部分属性（比如只写 color 变化），但 transition 必须作用于「起始态 → 结束态」的整个变化过程。如果原始类没定义目标属性值（比如没写 color: #333），移出时浏览器会从「计算后的当前值」跳回「未声明的初始值」，导致过渡被跳过。
-
transition必须写在「稳定态」的原始类上，不是只写在:hover里 - 所有参与过渡的 CSS 属性，必须在原始类中显式声明初始值（哪怕和默认值一样）
- 不要只靠浏览器默认值，比如
opacity默认是1，但最好手动写出来
正确写法：原始类定义完整 transition 和初始值
下面这个按钮悬停变色 + 缩放，移出时平滑还原：
.btn {
color: #333;
background: #f0f0f0;
transform: scale(1);
transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.btn:hover {
color: #fff;
background: #007bff;
transform: scale(1.05);
}
-
transition写在.btn原始类，不是.btn:hover -
color、background、transform都在原始类中给了明确初始值 - 避免混用简写
transition: all 0.2s—— 容易触发无关属性重绘，性能差且不可控
容易被忽略的坑：inherit / unset / initial 值不触发过渡
如果原始类用 color: inherit 或 background: unset，移出时浏览器无法确定「该过渡回什么值」，transition 就会静默失效。
- 绝对不要在参与过渡的属性上用
inherit、unset、initial - 不确定默认值时，用 DevTools 查看 computed 值，然后手动写死（比如
border-color: currentColor比border-color: inherit更稳妥） - 动画类（如
.animate-scale）若和:hover共存，需确保它们不覆盖原始类的transition声明
真正卡住的点往往不是语法错，而是原始类里少写了某一个看似「没必要」的初始值——比如忘了给 opacity 写 opacity: 1，结果移出时啪一下就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
