浏览器处理 transition 依赖样式计算的起始值到结束值链路，js 直接改 style 会覆盖 css 定义的过渡起点，导致动画中断或失效；应优先用 classlist 切换预设类，避免混用 style 操作。
transition 和 JS 直接改 style 冲突的本质
浏览器对 transition 的处理依赖「样式计算的起始值 → 结束值」这一链路。当你用 el.style.opacity = '0.5' 这类直接赋值时，它会覆盖 CSS 规则中定义的过渡起点（比如 .fade { opacity: 0; transition: opacity 0.3s; }），导致浏览器丢弃当前过渡状态，立刻跳到新值。常见现象是：hover 时元素闪一下、卡在中间态、或动画完全不触发。
优先用 classList 切换预设类，而非手动写 style
这是最稳定、可维护性最高的解法。CSS 控制所有过渡逻辑，JS 只负责开关状态。
- ✅ 正确：给元素加
el.classList.add('is-active')，对应 CSS 中定义.is-active { opacity: 1; transform: translateY(0); }，且该类与基础类共用同一transition声明 - ❌ 错误：先
el.classList.add('is-active')，再立刻el.style.transform = 'scale(1.2)'—— 后者会中断前者的 transition - ⚠️ 注意：
transitionend事件每个属性都会单独触发一次（比如同时过渡opacity和transform，会触发两次），监听时必须检查event.propertyName === 'opacity'，并考虑加{ once: true }
JS 批量操作前临时禁用 transition
当需要连续修改多个样式（如轮播图重置位置、拖拽后归位），必须避免 transition 在中间状态反复触发。
- 先执行
el.style.transition = 'none'，完成所有style赋值（如el.style.left = '0'、el.style.top = '100px'） - 再用
void el.offsetHeight或requestAnimationFrame(() => {})强制浏览器刷新样式树 - 最后恢复
el.style.transition = 'opacity 0.3s, transform 0.4s' - ⚠️ 不要省略强制刷新这步：否则浏览器可能把“禁用 → 修改 → 恢复”合并成一帧，transition 仍不会从正确起点开始
display 和 transition 必须分两帧处理
display: none 会立即将元素从渲染树移除，任何正在运行的 transition 都会被强制终止。想让 fade-out 动画播完再隐藏，不能靠同步代码。
- ✅ 正确顺序：
el.classList.add('fading-out')→ 等待transitionend事件 → 在回调里设el.style.display = 'none' - ✅ 备选（无事件时）：
el.style.opacity = '0'→setTimeout(() => { el.style.display = 'none'; }, 300)（时间需与 transition 持续时间一致） - ⚠️ 关键细节：如果用
getComputedStyle(el).opacity检查当前值来决定是否播放动画，务必注意该调用会触发 layout，应尽量集中或节流
scroll、input）中 class 切换和 layout 读取混在一起。这时候哪怕逻辑没错，也可能因浏览器帧调度导致过渡被截断——防抖 + requestAnimationFrame + 属性隔离（只对 transform 和 opacity 做 transition）才是实际项目里最可靠的组合。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
