必须用 document.documentelement.style.setproperty 修改 css 变量，因变量在 :root 声明，仅 html 元素及其继承链生效；body 上设置无效，且需配合 transition 规则引用变量才起作用。
直接用 document.documentElement.style.setProperty('--transition-duration', '800ms') 就能改过渡时长，但必须确保 CSS 里已通过 :root 正确声明该变量，否则静默失效。
为什么 document.body.style.setProperty 不起作用
CSS 变量作用域是“声明即生效”，不是“任意节点都能覆盖”。你在 :root 里定义的 --transition-duration，只属于 元素及其继承链；document.body 并未声明它，调用 style.setProperty 只会在 上写个无效内联样式，不冒泡、不触发更新。
- ✅ 正确入口：始终用
document.documentElement.style.setProperty('--transition-duration', '600ms') - ❌ 常见错误：漏写
--前缀、漏带单位（如写成'600'而非'600ms'）、在非:root节点上调用 - ⚠️ 调试建议：打开 DevTools → Computed 面板，搜索变量名，看最终解析值是否已更新
transition-duration 变量必须配合 transition 声明才生效
仅设置变量没用，CSS 中必须有明确的 transition 规则引用它。浏览器不会自动把变量名当属性名去匹配。
- ✅ 正确写法：
.circle { transition: transform var(--transition-duration) ease-out; } - ❌ 错误写法：
.circle { transition: transform 600ms ease-out; }—— 这样就无法被 JS 动态修改 - ⚠️ 注意：如果同时设了多个过渡属性（如
transform和opacity），但只在transition-property里写了transform，那opacity即使有变化也不会过渡
重置动画时必须先清空 transition-duration 再切换状态
呼吸训练类 UI 中，常见问题是圆环第二次启动时缩放起点错位。根本原因不是 JS 调用慢，而是过渡时间未归零导致状态残留。
- ✅ 正确顺序：
1. 移除.inhale类
2. 执行document.documentElement.style.setProperty('--transition-duration', '0ms')
3. 强制重排：void element.offsetWidth
4. 恢复目标时长：document.documentElement.style.setProperty('--transition-duration', '1200ms')
5. 添加.inhale类 - ⚠️ 关键点：
0ms不是“取消过渡”，而是让状态瞬间跳变回基础样式（如transform: scale(1.0)），为下一次过渡清空起点 - ? 默认值兜底：CSS 中写
transition: transform var(--transition-duration, 1000ms) ease-out，避免 JS 未赋值时过渡失效
真正容易被忽略的是第 3 步的 offsetWidth 强制重排——没有它，0ms 设置后浏览器可能仍缓存旧状态，导致后续 scale(1.2) 从错误起点开始过渡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
