animation-duration 不支持 css 变量动态计算，禁用动画应通过切换 animation-name 至 noop 动画实现，配合强制重置 class 确保立即生效。
animation-duration 不能直接响应 CSS 变量变化
直接写 animation-duration: var(--anim-enabled, 0.3s); 并不能实现“开关”效果——当 --anim-enabled 被设为 0s 时，浏览器会尝试解析该变量，但若变量未定义或值非法（比如空字符串、none），整条声明会被静默丢弃，回退到初始值 0s，导致动画意外失效或不触发。
更关键的是：animation-duration 属于 CSS 规范中明确**不支持变量动态计算**的属性之一。它不是“被忽略”，而是根本不会进入运行时计算流程。你看到的“禁用”，其实是靠 fallback 值兜底，而非主动控制。
真正有效的禁用方式：用变量切换 animation-name
动画是否播放，取决于 animation-name 是否匹配一个有效的 @keyframes 规则。利用这点，可以构造一个“空动画”作为禁用态：
- 定义一个无实际变化的
@keyframes：@keyframes noop { to { opacity: inherit; } } - 在元素上用变量控制名称：
.card { animation-name: var(--anim-name, slide-in); } - 全局开关只需改变量值：
:root { --anim-name: noop; }或 JS 动态设置document.documentElement.style.setProperty('--anim-name', 'noop')
这种方式完全绕过 duration 的限制，且兼容所有现代浏览器（包括 Safari 15.4+）。注意：noop 必须是真实存在的 @keyframes 名，否则变量 fallback 会失效。
配合 duration 变量做双重保险
虽然 animation-duration 本身不可控，但你可以把它和 animation-name 绑定使用，让“禁用”逻辑更清晰：
- 定义两套变量：
:root { --anim-duration: 0.3s; --anim-disabled-duration: 0s; } - 在样式中显式绑定：
.btn { animation-duration: var(--anim-duration); animation-name: var(--anim-name, fade-in); } - 禁用时同步改两个变量：
document.documentElement.style.setProperties({ '--anim-name': 'noop', '--anim-duration': '0s' });
这样做的好处是：即使某处漏了 --anim-name 切换，--anim-duration: 0s 至少能防止意外动画播放（虽然仍会触发 animationstart 事件）。
JS 动态禁用时容易忽略的渲染时机
直接改 CSS 变量后，动画未必立刻停止——尤其是已运行中的动画实例。浏览器不会中断当前帧，而是等下次重绘才应用新规则。常见表现是“点开关后还闪一下”。
要确保立即生效，必须强制重置动画状态：
- 给目标元素加一个临时 class：
el.classList.add('anim-reset'); - 在 CSS 中用更高优先级覆盖：
.anim-reset { animation: none !important; } - 下一帧移除：
requestAnimationFrame(() => el.classList.remove('anim-reset'));
这个技巧比单纯改变量更可靠，尤其适用于管理后台或可访问性要求高的场景。变量只是配置层，真正管住动画执行的，永远是最终计算出的 CSS 声明值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
