直接改 style.transitionduration 不生效，因为 transition 需属性值变化触发，单纯改 duration 不重置过渡状态；须先重置目标属性或强制重排（如读 offsetheight），或用 class 切换更可靠。
直接改 style.transitionDuration 不生效？
多数人试图用 JS 直接写 element.style.transitionDuration = '0.8s'，但发现动画没变快或变慢——这是因为 transition 依赖「属性值变化触发」，而单纯改 duration 并不会重置过渡状态。浏览器只在目标属性（如 backgroundColor、transform）真正改变时才启动新过渡。
- 必须先移除正在过渡的样式（比如清空
transform或设回初始值），再设新 duration + 新目标值 - 或者强制重排：在修改
transitionDuration后，读取一次offsetHeight或getComputedStyle，让浏览器同步计算并重置过渡队列 - 更稳妥的做法是切换 class，把 duration 写在 CSS 里，JS 只负责增删 class
transition 简写属性中 duration 被覆盖的常见坑
如果元素已有 transition: all 0.2s ease，你再用 JS 设置 element.style.transition = 'transform 0.5s ease'，整个简写会被替换——但要注意：这会丢失原 all 中其他属性（如 opacity）的过渡能力，除非你显式列出所有要过渡的属性。
- 推荐始终明确写出要过渡的属性，避免用
all：比如transition: transform 0.5s, opacity 0.3s - 若需动态控制多个属性的不同时间，用逗号分隔：
element.style.transition = 'width 0.4s, height 0.6s' - 不要混用简写和单个子属性（如同时设
style.transition和style.transitionDuration），后者会被前者覆盖
用 class 切换实现可靠的时间控制
这是最稳定、可维护性最高的方式。把不同 duration 写进 CSS 类，JS 只管开关类名，不碰内联样式。
/* CSS */
.fast { transition: transform 0.2s ease-out; }
.slow { transition: transform 0.6s ease-in-out; }
.slide { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
- 切换前确保目标属性已重置（例如
el.style.transform = ''），否则新 transition 不会触发 - 用
el.classList.replace('fast', 'slow')比先remove再add更安全 - 移动端要注意：过长的 duration（>0.5s）易被用户感知为卡顿，
0.2s–0.35s是较优响应区间
transition-duration 单位写错导致完全失效
写成 300（漏单位）、0.3sec（错误单位缩写）、.3s（虽合法但易读性差）都会让浏览器忽略该声明。只有 s 和 ms 被支持，且必须带前导零（.3s 允许，但 .3 不行）。
- 推荐统一用秒（
s），小数点后最多两位：如0.25s、0.3s，避免300ms带来单位换算误差 - 动态拼接时注意字符串格式：
`${duration}s`，别漏掉s - 检查 computed style 时，浏览器会把
0.3s显示为300ms，但这只是显示差异，不影响行为
实际效果是否生效，关键不在 duration 值本身，而在「属性变更」与「transition 声明」是否在同一渲染周期内完成——中间哪怕插入一次 layout 强制读取，都可能打断预期流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
