CSS变量本身不触发重绘，因此在:root中直接对变量设置transition无效；必须在使用变量的具体元素上，对展开后的可动画属性（如background-color）声明transition。
为什么直接在 :root 里加 transition 不生效
很多人以为只要在 :root 里写 transition: color 0.3s, background-color 0.3s; 就能自动过渡主题色，结果发现切换时还是“啪”一下变色。根本原因是：CSS 变量（--color-bg、--color-text）本身**不触发重绘**，改它们的值不会触发 transition —— 浏览器只对实际作用在元素上的可动画属性（比如 background-color、color）做过渡。
真正起作用的 transition 必须写在具体选择器上
要让暗黑模式切换有过渡效果，得把 transition 写在那些**实际使用了 CSS 变量的元素样式里**，而且必须针对变量展开后的最终属性（如 background-color），不能写变量名本身。
- ✅ 正确写法：
body { background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.4s ease, color 0.4s ease; } - ❌ 错误写法：
:root { transition: --color-bg 0.4s; /* 无效！CSS 变量不可被 transition */ } - 注意：如果多个组件都依赖同一组变量（比如按钮、卡片、标题），每个用到这些变量的地方都要单独加
transition，或统一用一个类（如.theme-transition）批量控制
如何避免过渡“卡顿”或“漏动”
即使加了 transition，仍可能看到部分元素没动、闪一下、或者延迟动——这通常是因为：
- 某些元素没显式设置
background-color或color，而是靠继承，但继承值变更不会触发过渡；需确保目标属性被明确声明（哪怕只是background-color: var(--color-bg);） - 用了
will-change: transform;等优化却干扰了颜色过渡，建议只在必要时加，且避免滥用 - 暗黑模式切换是通过 JS 切换
data-theme="dark"，但部分样式写在[data-theme="dark"] body下，而body的transition在非 dark 状态下未定义 → 应统一写在body基础选择器中，而非条件分支里 - 过渡时间太短（600ms）又像卡住；推荐 300–400ms +
cubic-bezier(0.25, 0.46, 0.45, 0.94)这类稍带弹性的缓动
transition 变量确实可以集中管理，但别指望它“自动生效”
你可以在 :root 里定义过渡参数，比如：
:root {
--transition-base: background-color 0.35s ease, color 0.35s ease;
}然后在各处引用：button, .card, header {
transition: var(--transition-base);
}这样便于统一维护，但关键点始终不变：这个 var(--transition-base) 最终必须落在**具体可动画的属性上**，且该属性值本身得是 CSS 变量展开后的结果（如 background-color: var(--color-bg)）。否则变量再整齐也没用。
最常被忽略的是：过渡不是“主题切换”的特效，而是“属性变化”的响应。变量只是中间传值工具，真正的动画锚点永远在元素自身样式声明里。
立即学习“前端免费学习笔记（深入）”；
