css变量在:hover中不触发重计算，因变量仅注入作用域而未被可动画属性引用；transition必须写在常态选择器中，且绑定color等标准属性才生效。
伪类切换时CSS变量不更新，根本不是“延迟”，而是压根没变
伪类（比如 :hover、:focus）本身不触发 CSS 变量重计算。你写 :hover { --color: red; }，浏览器不会把这当成一个“变量更新动作”，而只是在该伪类匹配时，把 --color 的值注入到该元素的样式作用域里——但前提是：这个变量**必须被某个实际参与渲染的属性引用**，且该属性本身处在过渡或动画链中。
常见错觉是“鼠标移上去颜色慢半拍”，其实是因为：--color 改了，但 color: var(--color) 没配 transition，或者配了却写在 :hover 规则里，导致移出时 transition 丢失。
CSS变量 + transition 在:hover里失效的典型写法
以下写法看似合理，实则过渡只单向生效：
button {
--text-color: #333;
color: var(--text-color);
}
button:hover {
--text-color: #007bff;
color: var(--text-color);
transition: color 0.2s;
}
问题在于：transition: color 0.2s 只存在于 :hover 状态下。移出时，该声明消失，浏览器回退到无过渡状态，color 立即跳变。
- ✅ 正确做法：把
transition写在常态选择器里，且确保变量绑定的属性（如color）始终在 transition 列表中 - ❌ 不要指望
--text-color自己“带动”color过渡——变量只是值容器，不触发动画逻辑 - ⚠️ 即使用了
transition: all 0.2s，也容易因浏览器优化跳过部分属性，不可靠
为什么JS改变量比:hover更“卡顿”？
用 JS 执行 el.style.setProperty('--delay', '0.3s') 后，如果对应动画没立刻响应，通常不是变量慢，而是以下任一原因：
- 变量值没被任何
transition声明引用（比如写了--delay，但transition里还是硬编码0.2s） -
transition简写缺参数：例如transition: opacity var(--delay);缺少缓动函数，整条声明被浏览器静默丢弃 - JS 修改后立即读取布局（如
el.offsetHeight），强制触发重排，反而让 delay 阶段被跳过 - 主线程正忙（比如长任务执行中），导致第一帧渲染推迟，看起来像“延迟”
真正可控的变量驱动方案
想让变量变化真正带动过渡节奏，必须满足三个硬条件：
- 变量必须出现在
transition简写中，且位置严格在时长位（如transition: opacity var(--duration) ease;） - 该
transition声明必须常驻在元素的基础 class 里，不能只靠伪类或 JS 动态添加 - 变量值变更必须通过
setProperty或 class 切换触发，不能靠 :root 层级修改后期望子元素自动响应（除非子元素显式继承并引用）
最容易被忽略的是：变量名拼错、单位缺失（--duration: 0.2 ❌，--duration: 0.2s ✅），或在 SCSS 中误用 $ 变量替代 CSS 自定义属性——前者编译即固化，后者才能运行时响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
