css变量本身不可动画，transition必须作用于使用变量的原生属性（如color、background-color）而非变量名；需统一颜色格式并确保transition声明在使用变量的元素上。
transition 为什么对 CSS 变量无效
直接给 --primary-color 加 transition: --primary-color 0.3s 不会生效——CSS 标准里 transition 不支持自定义属性（CSS 变量）本身作为可动画属性。浏览器不知道怎么插值两个 var(--x) 的中间态。
真正能触发过渡的，是那些**被变量计算后最终落地的原生属性**，比如 color、background-color、opacity 等。
- 变量只是“占位符”，不是“样式属性”
- 必须让变量参与计算的**结果属性**显式声明
transition - 如果只改变量、不重设依赖它的属性，动画根本不会启动
主题切换动画的正确写法（以 :root 变量 + class 切换为例）
假设你用 :root 定义暗色主题变量，再用 body.dark 覆盖；动画要起作用，关键在「哪里加 transition」和「谁在变」。
:root {
--text-color: #333;
--bg-color: #fff;
}
<p>body {
color: var(--text-color);
background-color: var(--bg-color);
/<em> ✅ 这里加 transition —— 动的是 color 和 background-color </em>/
transition: color 0.3s ease, background-color 0.3s ease;
}</p><p>body.dark {
--text-color: #ddd;
--bg-color: #1a1a1a;
/<em> ❌ 这里不能写 transition，变量本身不可动画 </em>/
}</p>
- transition 必须写在「使用变量的元素」上（如
body），而不是:root或.dark类本身 - 确保所有要过渡的属性都显式声明了
transition，漏一个就卡顿 - 避免用
all 0.3s：可能意外触发 layout、paint 重排，性能差
遇到 transition 生效但闪烁/跳变怎么办
常见于颜色值类型不一致，比如从 hsl(0, 0%, 0%) 切到 #000，或 rgba(0,0,0,1) 切到 black。浏览器无法插值不同格式，会退化为逐帧硬切。
- 统一颜色表示法：全用
rgb()或全用hsl()，避免混用hex和named colors - 透明度变化务必用
rgba()或hsla()，别靠opacity混淆语义 - 检查 computed style：用 DevTools 看切换前后两个状态里，
color和background-color解析出的实际值是否同类型
需要更精细控制时，用 prefers-color-scheme + 自定义属性响应式
系统级主题（如 macOS 暗色模式）触发时，@media (prefers-color-scheme: dark) 会立即生效，但默认无过渡。想让它也动起来，得把变量注入到有 transition 的元素上，并确保媒体查询内也维持同一套动画逻辑。
body {
transition: color 0.3s ease, background-color 0.3s ease;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--text-color: #eee;
--bg-color: #121212;
}
/<em> ✅ body 依然在用 var()，且 transition 已声明，所以会过渡 </em>/
body {
color: var(--text-color);
background-color: var(--bg-color);
}
}</p>
- 不要在
@media里重复写transition，它继承自外层 - 如果用了 JavaScript 强制切换 class（如
body.classList.toggle('dark')），要确保 class 切换时机不和媒体查询冲突，否则可能覆盖或抵消 - 动画时间最好和系统偏好切换节奏一致（通常 0.2–0.4s），太长显得迟钝，太短看不清
CSS 变量本身不参与渲染流水线，过渡效果完全取决于你把它“倒进”哪个原生属性里、以及那个属性有没有被正确监听。最容易忽略的，是以为改了变量就自动动起来，结果发现只有 class 切了、颜色却啪一下跳过去——那八成是 transition 写错位置，或者颜色格式没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
