CSS自定义属性加transition无效，因浏览器不对其插值；@property是唯一标准方案，需显式注册类型；替代法是用布尔变量控制、由原生属性承载过渡。
为什么 --color 这类自定义属性加了 transition 也不动？
因为浏览器根本不会对 CSS 自定义属性做插值计算——transition: --color 0.3s 看似合理，实则无效。自定义属性在语法层属于 <declaration-value>，默认按离散方式处理：切换时只在起始值和终值之间硬切，没有中间帧。哪怕两个值都是颜色，比如 --color: #fff → --color: #000，浏览器也不会自动算出中间的灰阶。
@property 是唯一能让变量“真过渡”的方案吗？
是目前标准中唯一能声明变量类型并启用插值的机制。但必须显式注册：
/* 必须写在 :root 或对应作用域内 */
@property --bg {
syntax: '<color>';
inherits: true;
initial-value: #fff;
}注册后，transition: --bg 0.3s 才会生效。不过要注意：
-
@property在 Safari 16.4+、Chrome 102+、Firefox 110+ 支持，旧版 WebView（如 Android 12 以下）基本不可用 - 每个要过渡的变量都得单独注册，
--text-color、--border、--shadow得各写一遍 - 继承链上若某层未声明
inherits: true，子元素就拿不到可动画值
不依赖 @property，怎么让主题切换真正平滑？
绕过变量本身，把过渡逻辑下沉到具体可动画属性上。核心是：让 transition 挂在 color、background-color 这些原生支持插值的属性上，而不是挂在 --bg 上。
立即学习“前端免费学习笔记（深入）”；
- 把主题变量当作“开关”，例如
--is-dark: 0 / 1，用calc()或color-mix()把它转成实际颜色值 - 确保
transition声明始终存在于目标元素上（比如写在body或基础组件类里），不能随主题 class 移除而消失 - 避免在
:root上写transition: --bg——它既不触发重绘，也不绑定到任何渲染属性
最稳的做法是：主题切换只改一个布尔变量，所有视觉样式通过函数实时计算，过渡由底层属性承载。变量只是状态，不是动画载体。
