css变量本身不支持transition，必须将其绑定到color等可动画的原生属性上并对其声明transition，变量更新后原生属性值重算才能触发过渡。
transition 不能直接作用于 CSS 变量值
你写 transition: var(--color) 是无效的——CSS 不支持对自定义属性（即 CSS 变量）本身做过渡。浏览器无法知道你要过渡哪个物理属性（比如 color、background-color），更无法在变量值变化时自动插值。实际效果是：变量一变，样式立刻跳变，毫无过渡。
必须把变量绑定到可动画的原生属性上
真正能触发 transition 的，只能是标准的、带明确数值空间的属性，比如 color、background-color、opacity、transform 等。CSS 变量只是“中间容器”，得靠它把值传给这些原生属性：
button {
--theme-color: #3b82f6;
background-color: var(--theme-color);
transition: background-color 0.3s ease;
}
<p>button:hover {
--theme-color: #ef4444;
/<em> 此时 background-color 会从旧值过渡到新值 </em>/
}</p>
- 关键点：过渡声明写在原生属性上（如
background-color），不是写在var(--theme-color)上 - 变量更新后，浏览器会重新计算依赖它的原生属性值，并触发已有 transition
- 确保颜色格式一致（如都用 HEX 或都用 RGB），否则可能因解析差异导致过渡中断
RGB/HSL 模式更利于平滑过渡
如果主题色用 HEX 或命名色（如 red），浏览器内部需转为 RGB 计算插值；而直接用 hsl() 或 rgb() 声明变量，语义更清晰、插值更稳定：
:root {
--primary: hsl(210, 70%, 50%);
}
<p>.card {
color: var(--primary);
transition: color 0.3s ease;
}</p><p>.dark-theme .card {
--primary: hsl(210, 70%, 30%); /<em> 仅调亮度，过渡自然 </em>/
}</p>
- HSL 中调整
l（亮度）或s（饱和度）比改 HEX 更可控 - 避免混用单位：不要让一个变量有时是
#3b82f6，有时是rgb(59, 130, 246)，会导致 transition 失效 - 透明度过渡需单独处理：
color不支持 alpha，要用rgba()或hsla()写变量
JavaScript 动态切换主题时要触发重排（必要但易忽略）
用 JS 修改 document.documentElement.style.setProperty('--theme-color', ...) 后，如果紧接着读取 getComputedStyle 或依赖布局的值，可能拿不到过渡效果——因为浏览器可能合并渲染帧。简单可靠的做法是：
- 修改变量后，强制触发一次重排（例如读取
offsetHeight） - 或者用
setTimeout(..., 0)把后续样式变更放到下一帧 - 更稳妥的方式：用 class 切换主题（如
document.body.classList.toggle('dark')），让所有变量和 transition 都由 CSS 规则控制，避开 JS 渲染时机问题
最常被跳过的细节是：过渡是否生效，取决于「原生属性是否真的变了」，而不是「变量有没有改」——变量改了但没被任何属性消费，或者消费它的属性没声明 transition，就永远看不到渐变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
