background-color transition 失效主因是初始色未明确定义或被 background 简写覆盖；须设初始值（如 transparent），仅改 background-color，用 ease-in-out 缓动、0.3s 单位，并避父级 transform/opacity 干扰。
transition 用在 background-color 上为什么没效果
常见错误是直接给 background-color 加 transition，但元素初始状态没设颜色，或者用了简写 background 覆盖了颜色值。浏览器无法插值「无」到「有」，过渡就失效。
- 必须明确设置初始
background-color（哪怕只是transparent） - 避免用
background: #fff这类简写，它会重置所有子属性，可能清掉你单独写的background-color - 确保悬停时只改
background-color，别同时动background-image或background整体
怎么写 transition 才真正平滑
只写 transition: background-color 0.3s 看似够用，但实际容易卡顿或跳变。关键在 timing function 和触发条件。
- 加上缓动函数：用
transition: background-color 0.3s ease-in-out比默认的ease更自然 - 别漏单位：
0.3s不能写成.3s或300ms（虽然合法，但团队协作中0.3s最易读） - 加
will-change: background-color在悬停前可提示浏览器提前优化渲染，尤其对低性能设备有用
hover 时背景色过渡在 Safari / iOS 上不工作
iOS Safari 对 background-color 过渡有兼容性坑：如果父容器有 transform、opacity 或 filter，子元素的 transition 可能被强制禁用或延迟触发。
- 检查父级是否用了
transform: translateZ(0)或opacity: 0.99这类“强制硬件加速”的 hack，它们会干扰子元素过渡 - 临时方案：把
transition移到父容器上，或改用box-shadow模拟背景色变化（如box-shadow: inset 0 0 0 100px #007bff） - iOS 15+ 已修复大部分问题，但 iOS 14 及更早版本仍需测试
transition 触发后鼠标快速进出导致颜色残留
这是典型的过渡队列未清空问题。用户快速 hover → unhover → hover，浏览器还在执行上一次的动画，新状态被覆盖或卡在中间帧。
- 加
transition-cancel: auto不行——CSS 没这属性。正解是用transition-property: background-color明确限定只过渡颜色，避免其他属性干扰 - 更稳妥的做法：在
:hover里用transition: background-color 0.2s linear，非 hover 状态用transition: background-color 0.15s linear，让退出更快 - 极端情况可加 JS 监听
transitionend清理 class，但纯 CSS 场景下优先调参而非加脚本
最常被忽略的是：过渡生效的前提是两个颜色值必须都是可计算的 RGB 值。HEX、named color、HSL 都可以，但 currentcolor 或 inherit 在某些浏览器里会断掉插值链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
