transition无效的主因是hover前后属性类型不匹配：需确保属性名一致、值类型可插值（如颜色/长度/opacity）、初始值非auto/unset，且避免使用display/visibility等不可过渡属性。
transition 无效是因为 hover 前后属性类型不匹配
CSS transition 不触发，最常见的原因是初始状态和 :hover 状态中参与过渡的属性值类型不一致——比如一边是 color: #000，另一边是 color: transparent，虽然都合法，但浏览器无法插值；或者一边是 opacity: 1，另一边是 display: none，而 display 根本不可过渡。
必须确保两个状态中被过渡的属性：
- 名称完全相同（
background-color不能写成background） - 值类型可插值（颜色、长度、数字、透明度等，不包括
display、visibility、z-index） - 初始状态不能是
auto或unset（如height: auto无法过渡到height: 100px）
:hover 中改了 display 或 visibility 就别指望 transition 起作用
display 和 visibility 都不是可过渡属性。哪怕你写了 transition: all 0.3s，它们的变化仍是瞬时的。
替代方案要分情况：
立即学习“前端免费学习笔记（深入）”；
- 想“淡入淡出” → 用
opacity+pointer-events控制交互 - 想“高度展开收缩” → 初始设
height: 0、overflow: hidden，hover 改为具体高度（注意：不能用height: auto） - 需要真正隐藏 DOM → 先用
opacity和transform过渡，再用 JavaScript 在动画结束后切换display
transition-property 写成 all 容易掩盖问题
用 transition: all 0.2s 看似省事，实则会让不可过渡的属性“假装动了”，干扰调试。更糟的是，它可能意外触发重排或重绘，拖慢性能。
正确做法是显式声明：
- 只过渡真正需要的属性：
transition: opacity 0.2s, transform 0.2s - 避免过渡布局属性（
width、height、left、top），优先用transform和opacity - 如果必须动尺寸，确认初始值不是
auto，且目标值是明确像素/百分比
伪类状态切换有延迟？检查是否遗漏了初始状态声明
很多人只写 a:hover { color: red; transition: color 0.3s; }，但没在默认状态里声明 color 和 transition。结果是：鼠标移入时有过渡，移出时没有——因为 transition 只在 hover 状态生效，离开后就没了。
正确写法是把 transition 放在默认选择器上：
a {
color: #333;
transition: color 0.3s;
}
a:hover {
color: #f00;
}
同理，所有参与过渡的属性（如 transform、opacity）都要在非 hover 状态下有明确初始值，不能依赖浏览器默认或继承值。
最常被忽略的一点：过渡效果是否在移动端也生效？记得加上 touch-action: manipulation 避免 iOS Safari 的点击延迟影响 hover 模拟效果。
