如何让CSS自定义属性配合transition平滑变化？

直接 transition: --my-var 无效，因为 CSS 自定义属性不可动画；必须通过 color、background-color、transform 等原生可动画属性间接驱动，并确保值格式一致、触发重排重绘。

为什么直接 transition: --my-var 无效

因为 --my-var 是 CSS 自定义属性，本身不可动画。浏览器不支持对自定义属性做插值计算，哪怕你写了 transition: --my-var 0.3s，也完全没反应——它不是 opacity 或 transform 那类有中间值的属性。

必须通过被过渡的属性“间接驱动”

真正能动的是 color、background-color、transform 这些原生可动画属性。你需要把 --my-var 的值“注入”到它们身上，再对这些属性加 transition：

1. color: var(--text-color); → 对 color 加 transition: color 0.3s
2. background-color: var(--bg); → 对 background-color 加 transition: background-color 0.3s
3. transform: scale(var(--scale)); → 对 transform 加 transition: transform 0.3s（注意：--scale 必须是纯数字，如 1.2，不能带单位）

关键点：过渡声明必须写在初始元素上，且目标属性（如 color）的起始值和结束值都得是可插值格式（比如都用 rgba()，避免 red ↔ hsl() 混用）。

动态更新时要注意“值变更”的触发时机

JS 修改 --my-var 后，依赖它的属性（如 color）必须发生实际变化，transition 才会启动。常见陷阱：

1. 用 element.style.setProperty('--my-var', '255, 0, 0') 改值，但 color: rgb(var(--my-var)) 未重算 → 没变化，不动画
2. 改了变量但没触发重排/重绘（比如只改了不影响样式的变量）→ 浏览器跳过过渡
3. 多个变量同时更新，但只对其中一个加了 transition → 其余仍瞬变

稳妥做法：确保每次 JS 更新都伴随一个明确的样式变更（例如先设 opacity: 0.99 再设回 1），或用 getComputedStyle 强制读取触发重排。

缩放类动画慎用 --scale + transform

如果想用 --scale 控制 transform: scale(var(--scale))，必须保证：

1. --scale 初始值和目标值都是合法数字（1、1.5、0.8），不能是 auto 或空字符串
2. transform 声明里不能混用其他函数（如 scale(var(--scale)) translateX(10px)），否则整个 transform 值无法插值，动画失效
3. 若需复合变换，建议拆成多个自定义属性（--scale、--tx），并统一用 transform: scale(var(--scale)) translateX(calc(var(--tx) * 1px))，再对 transform 加过渡

最易忽略的一点：transform 的插值逻辑依赖矩阵分解，当 scale 从 1 跳到 0 时，某些浏览器会退化为瞬移——此时应避免用 0，改用极小值如 0.001。