color-mix() 无法被 transition 驱动，因其是声明期静态计算函数，仅在样式解析时求值一次，后续变量变更、class 切换或媒体查询均不触发重算，故无法实现平滑过渡。
不能用 color-mix() 实现平滑过渡——它不参与 CSS 动画或 transition，改变量也不会重算，写死了就是静态值。
为什么 color-mix() 无法被 transition 驱动
color-mix() 是声明期计算函数，只在浏览器解析样式时求一次值。后续修改 CSS 变量、切换 class 或触发媒体查询，都不会让它重新执行。
- 写了
background-color: color-mix(in srgb, #2563eb 70%, #1e40af 30%)，结果色就固定了，哪怕你 JS 改了--primary，它也不变 -
transition: background-color 0.3s对它完全无效：浏览器不是在过渡“函数”，而是在过渡最终输出的那个颜色值（一个静态 RGB） - 控制台不会报错，但 DevTools 里能看到 computed 值一动不动，hover 或 theme 切换时只有突变
想让主题色“渐变式”切换，得绕过 color-mix() 直接操作可动画属性
真正能被 transition 插值的，只有原生可动画属性，比如 background-color、color、border-color。所有“动态混合”逻辑必须提前算好，塞进这些属性里。
- 用
hsl()替代color-mix()做明度/饱和度偏移：比如hsl(210, 70%, 50%)→hsl(210, 70%, 30%)，transition 能自然插值亮度 - 若必须用混合结果，就得构建时或 JS 运行时生成具体颜色值，再赋给
style.setProperty('--theme-color', 'lch(40% 80 270)')，然后在 CSS 中写background-color: var(--theme-color) - 避免在
background简写中混用color-mix()：一旦用了background: linear-gradient(...)，background-color的 transition 就失效了
Chrome 120+ 实验性支持渐变 stop 动画，但别依赖它
Chrome 120 起允许对 linear-gradient() 中的 color stop 颜色做 transition，例如：
background-image: linear-gradient(to right, #2563eb, #1e40af);<br>transition: background-image 0.4s;
但这仍是实验性行为：
- Safari 和 Firefox 完全不支持，会直接跳变
- 要求渐变结构一致（stop 数量、位置百分比必须相同），否则 fallback 为无过渡
- 不能和
color-mix()混用：你不能写linear-gradient(color-mix(...), color-mix(...))，函数不被接受
真正可靠的路径只有一条：把颜色混合逻辑交给 JS 或构建工具算出具体值，再交由原生可动画属性承载。CSS 本身没有“运行时混合 + 过渡”的能力，color-mix() 再新，也跨不过这个限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
