能实现平滑过渡，但必须显式声明初始background-color（如transparent或#fff）、transition写在基类中、避免background简写覆盖，且推荐用hsl统一色相过渡以保色彩纯净。
直接用 transition 控制 background-color 就能实现平滑过渡，但必须确保起始态和结束态都明确、且过渡声明在变化发生前就已生效——否则只会跳变。
为什么加了 transition 还是瞬切？
最常见原因是初始背景色没显式声明。比如 body 默认没有 background-color 值，从 undefined 到 #ff6b6b 无法插值。
- 必须为元素写明初始色：
background-color: transparent或background-color: #fff - 别依赖浏览器默认值，
transparent比空值更可靠 - 如果用了
background-image（如渐变），它会覆盖background-color，导致过渡对象实际没变
如何让添加/移除 class 都触发过渡？
只在 .active 类里写 transition，移除时不会淡出——因为原始状态没过渡声明。
- 基类（如
.card）必须带默认transition：transition: background-color 0.4s ease; -
.card.active可覆盖为更快的淡入：transition: background-color 0.2s ease-in; - 这样添加 class 触发淡入，移除时自动淡出，无需 JS 干预
用 HSL 控制色相过渡，避免脏色
RGB 插值容易产生灰黄棕等不可控中间色；HSL 只动色相（h），饱和度（s）和亮度（l）固定，过渡干净。
- 写法：
hsl(0, 70%, 85%) → hsl(180, 70%, 85%)（h是无单位数字，s/l后必须跟%） - 色相差建议 ≤180°，太大可能视觉跳跃
- Chrome 对漏掉
%的s/l会静默失效，页面“不动”，但控制台不报错
滚动或交互触发时，JS 更新哪部分？
别直接改 element.style.backgroundColor，尤其在滚动中高频调用——这会强制重排，卡顿明显。
- 推荐改 CSS 变量：
document.documentElement.style.setProperty('--bg-main', 'hsl(240, 70%, 85%)'); - CSS 里用：
background-color: var(--bg-main); transition: background-color 0.35s ease; - 确保变量有兜底值：
:root { --bg-main: #fff; }，避免首次渲染空白
最容易被忽略的是：HSL 的 s 和 l 单位漏写 %，以及基类缺失默认 transition ——这两点会让整个过渡逻辑静默失效，而不是报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
