css变量不能直接过渡，因浏览器将其视为无类型字符串，不支持插值；必须绑定到background-color等原生属性并对其声明transition，或用@property注册类型（chrome/safari支持）实现变量级过渡。
不能直接过渡 CSS 变量，transition: --color 0.3s 这类写法完全无效——浏览器会静默忽略，颜色跳变不可避免。
为什么 transition: --x 不起作用
CSS 变量（自定义属性）本质是字符串容器，没有类型信息，浏览器无法判断两个值之间如何插值。比如从 #007bff 到 #ef4444，没有明确语义，就无法做颜色空间混合。它不是“可动画属性”，不在 CSS 动画属性白名单里。
-
transition只对原生属性生效：如background-color、color、transform、opacity -
var(--x)是取值表达式，不是属性本身；变量更新只是触发依赖它的原生属性重算，不自动带过渡 - 哪怕你在
:root或元素上写了transition: --primary，这条声明也不会被解析为有效动画规则
怎么让变量变化触发平滑过渡
必须把变量绑定到可动画的原生属性，并在该属性上声明 transition。
- 写法示例：
.btn { background-color: var(--btn-bg); transition: background-color 0.3s ease; } - 切换变量时（如通过
body.dark或 JSstyle.setProperty('--btn-bg', '#121212')），background-color值重算，已有transition就会启动 - 两端颜色格式必须一致：都用
hsl()最稳，避免一边#fff、一边rgb(0,0,0)导致插值中断 - 所有参与过渡的属性，必须在默认态和切换态都显式写出具体值，不能靠继承或留空
想真正过渡变量本身？得用 @property
这是唯一标准方式，但兼容性有限（Chrome/Edge/Safari 支持，Firefox 不支持）。
- 必须在
<style></style>顶层注册：@property --theme-color { syntax: '<color>'; inherits: false; initial-value: #007bff; }</color> - 之后才能写：
.card { transition: --theme-color 0.4s; } - 注册缺一不可：
syntax错、引号漏、initial-value类型不符，都会导致失效 - 别指望 JS 动态插入
@property—— 它必须是静态 CSS 规则
最易被忽略的是：过渡声明必须落在「使用变量」的元素上，而不是 :root 或父容器；且每个需要过渡的组件都得单独加 transition，没法靠一个变量全局驱动动画节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
