css变量本身不触发动画，需javascript更新并绑定到支持过渡的原生属性（如transform、opacity），且css中必须声明对应transition。
CSS变量本身不驱动状态，得靠JavaScript主动更新才能触发样式变化
为什么直接改--state不会自动更新元素样式
CSS变量只是“值的占位符”，浏览器在计算样式时只做一次快照，不会监听变量变化。比如你写了transform: scale(var(--scale))，然后用element.style.setProperty('--scale', '1.5')去改，这个动作本身不触发重排或过渡——除非你提前在CSS里声明了transition: transform 0.2s，且--scale被用在支持动画的属性上。
- 常见错误：以为改了
--is-active，再在opacity: var(--is-active, 1)里引用，就能让元素淡入——其实opacity根本没变，因为--is-active不是opacity的合法值 - 真正起作用的是“变量 → 原生CSS属性 → 浏览器渲染管线”这条链，中间任何一环断开（比如变量未定义、未被引用、引用处语法错），状态就卡住
- 验证是否生效：打开DevTools → Elements → Styles面板，手动编辑
--xxx值，看对应元素样式是否实时响应
setProperty更新变量的正确调用时机和作用域
必须确保DOM已挂载、目标元素存在、变量定义位置与读取位置匹配。最常用的是操作document.documentElement，因为:root定义的变量全局可继承。
- 写法必须是
document.documentElement.style.setProperty('--color-primary', '#3b82f6')，不能漏掉双短横线，也不能写成style.--color-primary = '...'（语法报错） - 如果变量定义在某个组件容器上（如
.card { --bg: white; }），就得对那个.card元素调用setProperty，而不是document.documentElement - 服务端渲染或异步组件中，
onMounted或useEffect里调用才安全；在created或组件初始化阶段调用可能静默失败 - 首次设置后，后续修改会立即生效，但若变量值为空字符串或非法（如
--delay: ;），某些浏览器（尤其是Safari）会中断整个transition链
如何让状态变化真正“动起来”
要实现视觉反馈，必须把CSS变量绑定到支持过渡/动画的原生属性，并显式声明transition或@keyframes。
- 可行组合：
background-color、transform、opacity、box-shadow等；不可行组合：display、z-index、font-family - 写法示例：
transition: background-color 0.3s ease, transform 0.3s ease;—— 注意不是transition: --bg-color - Safari兼容性要点：对
transform: translateX(var(--x))支持不稳定，建议改用transform: translateX(calc(var(--x) * 1px))显式带单位 - 高频更新（如拖拽、滚动）必须节流：
requestAnimationFrame包裹setProperty调用，否则容易丢帧
真正难的不是改变量，而是确保变量被正确引用、被浏览器识别为可动画属性、且在整个生命周期里没有因作用域错位或初始值无效而中断链路。一个var(--theme-color)写错大小写，整个主题切换就静默失效——这种问题往往在灰度环境才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
