style.transition 设置过渡动画可行但极易失效，因必须显式指定非零且带单位的 transition-duration（如 "opacity 300ms ease"），缺单位、为 0s 或属性不支持插值均导致浏览器忽略过渡。
直接用 style.transition 设置过渡动画是可行的，但极易因漏写 transitionDuration 或误用单位导致动画完全不生效——这是最常被忽略的硬性前提。
为什么 style.transition = "all 0.3s" 有时没反应
浏览器要求 transitionDuration 必须显式指定且非零，否则整个过渡被忽略。用字符串赋值时，若省略单位（如写成 "all 0.3"）、或写成 "all 0"、甚至空格错位（"all0.3s"），都会让解析失败，退回到瞬时切换。
-
style.transition = "opacity 300ms ease"✅ 正确：带单位、非零、空格分隔 -
style.transition = "opacity 0.3 ease"❌ 失效：缺单位，被当无效值丢弃 -
style.transition = "all 0s"❌ 失效：持续时间为 0，等同于无过渡 -
style.transition = "transform 0.2s, opacity 0.2s"✅ 支持多属性逗号分隔
style.transition 和 CSS 类里的 transition 有什么区别
行为一致，但优先级和维护成本不同：JS 动态设置会覆盖样式表中同名规则，且无法复用、难调试。更关键的是，style 属性只控制单次状态，无法像类那样配合伪类（如 :hover）自动触发。
- 适合场景：需要根据数据/条件动态决定过渡参数，比如拖拽结束时用
transform回弹，速度随拖动距离变化 - 不适合场景：按钮悬停变色、菜单展开收起——这类应写在 CSS 类里，用
:hover或.open类控制 - 注意：多次连续赋值
style.transition会覆盖前一次，不会叠加
哪些 CSS 属性能被 style.transition 过渡
不是所有属性都支持过渡。例如 display、height（当值为 auto 时）、font-family 等不可插值，设了也无效。必须查 MDN 的 CSS 可动画属性列表 确认。
- 安全常用项：
opacity、transform、background-color、width/max-height（需固定值）、margin/padding - 高风险项：
height（auto不行）、display（完全不支持）、position（static→absolute不可过渡） - 性能敏感项：
left/top触发重排，优先用transform替代
真正容易出问题的地方在于：你以为写了过渡，其实浏览器根本没启动它——要么是 duration 为 0 或单位缺失，要么是目标属性本身不支持插值。动手前先确认这两条，比调半天动画逻辑更省时间。
