css变量不能被transition直接过渡，必须对具体属性（如background-color）设置transition并引用变量，因transition仅支持可插值的原生属性，变量更新是原子性的无中间帧。
CSS 变量本身不能被 transition 直接过渡，按钮主题色要平滑切换，必须把 transition 写在具体属性上（如 background-color），而不是变量名。
为什么 transition: --primary-color 0.3s 完全无效
浏览器会静默忽略这行声明，不报错也不生效。CSS 的 transition 只支持原生可插值的属性（color、background-color、opacity、transform 等），不支持自定义属性名本身。变量只是“值的占位符”，它的更新是原子性的——变就全变，没有中间帧。
- 写
transition: --primary-color 0.3s→ 浏览器当没看见 - 写
transition: background-color 0.3s+background-color: var(--primary-color)→ 才能动起来 - 如果变量被用于
filter或box-shadow，也得对这两个属性加transition，不是对变量
按钮颜色平滑切换的最小可行结构
核心是三段式：基础样式定义变量 + 具体元素引用变量 + 在该元素上声明过渡属性。不能偷懒只在 :root 或主题 class 里加 transition。
-
:root中定义--primary-color: #007bff，深色主题下用.theme-dark覆盖为--primary-color: #60a5fa - 按钮规则中必须显式写出
background-color: var(--primary-color)，不能靠继承或间接计算 -
transition必须放在按钮默认状态里：button { background-color: var(--primary-color); transition: background-color 0.3s ease; } - 确保两端颜色值都是明确可插值的（比如
#ffffff↔#121212），避免用transparent或inherit作其中一端
容易被忽略的兼容性与性能坑
看似简单，但实际部署时几个点常导致“点了没动画”或“闪一下再动”：
- 如果按钮用了
border-color: var(--primary-color)，但没给border-color加transition，那边框就会跳变 - 伪元素（
::before）里用变量 +transition，Safari 和部分旧版 Chrome 渲染有延迟，建议避开 - 变量若被用于
font-size或margin，切换时会触发重排（reflow），卡顿明显；主题色切换请严格限定在color/background-color/box-shadow这类仅重绘（repaint）属性上 - 不要在
@keyframes里试图动画变量值：@keyframes fade { to { --opacity-level: 0.2; } }→ 不生效
真正可靠的平滑切换，靠的是「变量定义 + 属性引用 + 属性级 transition」三者缺一不可。少一个环节，动画就断在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
