background-color过渡必须通过class切换实现，直接修改style会跳过transition；定时器间隔需≥transition时间+0.1s；全屏背景需设html/body高度为100%或min-height:100vh并清除margin和滚动条干扰。
background-color 过渡必须用 class 切换，不能直接改 style
直接 element.style.backgroundColor = 'red' 会跳过 transition，因为浏览器把内联样式变更视为“强制重绘”，不触发过渡链。CSS transition 只响应 class 变更或 CSS 属性的声明式变化（比如 :hover），不是 JS 的实时赋值。
实操建议：
- 预先在 CSS 中定义好每种背景色对应的 class，比如
.bg-1、.bg-2 - 用 JS 控制
element.className或element.classList.replace()来切换 - 确保 transition 声明写在基础 class 上（如
.fullscreen-bg），而不是每个颜色 class 里
.fullscreen-bg {
transition: background-color 1.2s ease-in-out;
}
.bg-red { background-color: #ff6b6b; }
.bg-blue { background-color: #4ecdc4; }
.bg-purple { background-color: #6a5acd; }
定时器间隔必须大于 transition 持续时间
如果 setInterval 设为 1000ms，但 transition 是 1.2s，就会在动画中途强行切到下一个 class，导致卡顿、回退、甚至过渡中断——浏览器来不及完成上一帧的渲染流程。
常见错误现象：background-color 突然跳变、闪烁、过渡只执行一半就重置。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 定时器间隔 ≥ transition 时间 + 0.1s 安全余量（例如 transition: 1.2s → setInterval 至少 1300ms）
- 避免用
setTimeout递归调用时忘记清除旧定时器，造成内存泄漏和节奏错乱 - 用
requestAnimationFrame不适合这种固定节奏切换，它依赖帧率，反而更难控制平滑性
body 全屏背景要防滚动条干扰高度计算
如果页面内容超长，body 默认有滚动条，height: 100% 实际只占视口高，但背景色会随滚动露出空白——看起来像“没铺满”。这不是 transition 问题，是布局前提错了。
使用场景：轮播式 landing page、产品介绍页首屏、纯视觉引导页。
实操建议：
- 给
html和body都设height: 100%+margin: 0 - 用
min-height: 100vh替代height: 100%更稳妥（尤其内容少时） - 如果要用
body直接承载过渡，加overflow-x: hidden防横向滚动条破坏全屏感
颜色数量多时，transition 性能其实很稳，但别用 hsl() 动态计算
有人想用 JS 计算 hsl(0, 100%, 50%) → hsl(120, 100%, 50%) 然后插值 setStyle，这完全绕过了 CSS 硬件加速，CPU 渲染压力大，尤其低端机掉帧明显。
性能影响：直接操作 style.color 类属性在每帧都触发 layout → paint，而 class 切换由 CSS 引擎批量处理，GPU 可加速 color blend。
实操建议：
- 颜色方案提前定好（比如 5 种主色），写死在 CSS class 中
- JS 只做索引轮转（
currentIndex = (currentIndex + 1) % colors.length），然后换 class - 避免在定时器里做任何 DOM 查询（如
document.body），提成变量缓存
最易被忽略的是 body 的 margin 和滚动条宽度——哪怕只差 17px，也足以让背景在切换瞬间闪一下。检查时先加 body { margin: 0; overflow-y: hidden; }，再谈过渡。
