transition 必须通过 class 切换实现，直接修改 style 会导致跳变；需预设颜色类、统一颜色格式、设置安全定时器间隔，并确保全屏背景布局正确。
background-color transition 必须用 class 切换，不能直接改 style
直接写 element.style.backgroundColor = 'blue' 会导致颜色瞬间跳变，transition 完全不触发。浏览器把内联样式赋值当作强制重绘，绕过了 CSS 的状态变更检测机制。
正确做法是预设好颜色 class，比如：.bg-red、.bg-blue、.bg-purple，再用 JS 控制 element.classList.replace() 或 element.className 切换。
- transition 声明必须写在基础 class 上（如
.fullscreen-bg），而不是每个颜色 class 里 - 避免在目标 class 中使用
background简写（例如background: #fff url(img.png)），它会覆盖 background-color，导致过渡中断 - 起始色和目标色要用同一种格式：都用
rgb()、都用hsl()或都用十六进制，混用rgba()和hsl()会跳变
定时器间隔必须 ≥ transition 时间 + 0.1s
如果 CSS 写了 transition: background-color 1.2s ease，但 JS 用 setInterval(() => switchClass(), 1000)，就会在动画还没结束时强行切到下一个 class —— 浏览器来不及完成渲染流程，结果是卡顿、回退、甚至颜色闪一下又跳回去。
- 安全间隔 = transition 持续时间 + 至少 0.1s 余量（例如 1.2s → 设为 1300ms）
- 别用
setTimeout递归调用却不清理旧定时器，容易内存泄漏、节奏错乱 -
requestAnimationFrame不适合这种固定节奏切换，它依赖帧率波动，反而更难控制稳定性
全屏背景必须解决 height 和滚动条干扰
只给 body 设 height: 100% 是不够的。页面内容一长，body 默认出现滚动条，height: 100% 实际只占视口高度，背景色会在滚动时露出空白区域——这不是 transition 失效，而是布局前提错了。
- 必须同时设置
html, body { margin: 0; min-height: 100vh; } - 加
overflow: hidden可防滚动条干扰，但要确认业务允许隐藏滚动 - 如果页面本身需要滚动，建议把全屏背景套在一个
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;的独立容器里，避开 body 高度计算逻辑
color-stop 渐变过渡比纯色更可控，但要注意兼容性
想从单色过渡到渐变？background-color 无法平滑过渡到 linear-gradient()，因为它们属于不同属性。浏览器不支持在纯色和渐变之间插值。
- 稳妥方案：统一用
background-image: linear-gradient()，只改 color stop 的颜色值（位置参数如0%, 100%固定不变） - Chrome 120+ 支持
transition: background-image直接动画 color stop，但 Safari 15 及更早版本仍 fallback 为跳变 - 生产环境若需兼容老 Safari，可用伪元素叠加 +
opacity过渡替代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
