transition不支持css自定义属性直接补间，因其原生不识别--xxx语义；需用@property注册类型或改用标准属性（如background-color）硬编码值实现过渡。
transition 不支持 CSS 自定义属性（--xxx）直接补间
浏览器原生不把 --xxx 当作可动画属性，哪怕你写了 transition: --color 0.3s，它也会静默忽略——不是报错，而是根本不起作用。这是因为 CSS transition 的补间机制只识别标准属性名（如 color、opacity），不解析自定义属性的值类型或语义。
用 color 等标准属性间接驱动时，初始值必须显式声明
如果你靠 --primary 控制 color，比如：color: var(--primary);，那 transition: color 0.3s 才可能生效。但这里有个关键陷阱：
-
--primary在基础选择器中没设初值（比如--primary: #000），计算出的color就是initial或inherit，导致起始值不可插值 - 在 :hover 或 JS 切 class 时只改
--primary，但没同步确保color的计算结果有明确数值起点（例如从rgb(0, 0, 0)→rgb(255, 0, 0)） - DevTools 的 Computed 面板里检查
color值，如果显示为invalid或unset，过渡必然失败
JS 动态修改 style.setProperty('--x', ...) 后过渡仍不触发
即使你把 transition: color 0.3s 写在基础类里，用 JS 改 --x 也不会自动触发 color 变化——因为浏览器不会监听自定义属性变更并重算依赖属性。你需要手动触发一次“重绘”：
- 改完
--x后，立刻读取一个触发 layout 的属性，例如offsetHeight，强制浏览器同步重排 - 或者加个
setTimeout(() => { /* 再改状态类 */ }, 0)把变更推到下一帧 - 更稳妥的做法：避免依赖变量间接驱动，改用
transform或opacity这类原生可动画属性 + 类切换
真正能补间的替代方案只有两个
想让颜色/尺寸等随变量变化产生过渡，目前只有两条路走通：
- 用
@property（需 Chrome 110+ / Safari 16.4+）显式注册自定义属性类型：@property --hue { syntax: '<integer>'; inherits: false; initial-value: 0; }</integer>，之后transition: --hue 0.3s才有效 - 放弃变量驱动，改用
transition: background-color 0.3s并在 class 中硬编码值，例如.theme-dark { --bg: #111; background-color: #111; }
前者兼容性窄，后者失去变量灵活性；没有“既用变量又平滑过渡”的银弹——这是 CSS 动画模型本身的限制，不是写法问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
