JS 直接改 style 会中断 CSS transition 动画，因覆盖样式导致浏览器丢弃过渡状态；应优先用 classList 切换预设类，避免高频 class 操作、强制重排及未过滤的 transitionend 事件。
transition 期间 JS 直接改 style 会中断动画
CSS transition 依赖属性值的“起始→结束”计算，而 JS 直接赋值 element.style.property = value 会覆盖 CSS 规则中的声明，导致 浏览器 丢弃当前过渡状态，立即跳到新值。常见现象是：鼠标快速悬停 / 点击时，元素闪一下或直接卡在中间态。
- 避免在
transition运行中用 JS 强制写style（比如el.style.opacity = '0.5'） - 优先用
classList.toggle()切换预设类名，让 CSS 控制整个过渡过程 - 若必须用 JS 控制值，改用
el.setAttribute('style', '……')并确保包含完整的transition声明（不推荐，易出错）
频繁 class 切换导致 transition 反复重置
当 JS 在短时间内多次调用 el.classList.add() / .remove()，浏览器可能来不及完成上一次 transition 就触发下一次，造成动画被截断、卡顿或视觉跳跃。尤其在滚动、拖拽、输入等高频事件中明显。
- 加防抖：对触发 class 切换的事件（如
scroll、input）做setTimeout或requestAnimationFrame节流 - 用
getComputedStyle(el).property检查当前状态，避免重复添加 / 移除同一 class - 给
transition加transition-property限定范围（如只过渡transform和opacity），减少无关属性干扰
JS 强制重排（reflow）打断 transition 流程
读取某些布局相关属性（如 offsetHeight、getBoundingClientRect()、computedStyle.width）会触发同步重排，若发生在 transition 中间，可能导致动画帧丢失或强制重置。
- 把读取布局的操作集中到一帧开头（如
requestAnimationFrame(() => {/* 读取 */})），避免夹在样式写入之间 - 避免在
transitionend回调里立刻读取布局 —— 此时动画刚结束，但渲染可能未完成，可再包一层requestAnimationFrame - 用
transform替代top/left等触发布局的属性，减少重排风险
transitionend 事件监听失效或触发多次
transitionend 不会冒泡，且每个过渡属性都会单独触发一次（比如同时过渡 opacity 和 transform，会触发两次）。若监听逻辑没过滤，容易执行重复操作或漏掉关键状态。
立即学习 “ 前端免费学习笔记（深入）”；
el.addEventListener('transitionend', (e) => {if (e.propertyName === 'opacity') {// 只响应 opacity 完成 doSomething(); } });- 始终检查
e.propertyName，避免误响应其他属性 - 注意 伪元素（如
::before）的 transition 不会触发父元素的transitionend - 移除监听器后记得清理，否则可能在元素销毁后仍触发回调
过渡本身不复杂，真正难的是在 JS 动态控制和 CSS 声明式动画之间守住那条边界 —— 多数问题其实出在“以为改了 class 就安全”，却没意识到 class 切换太密、或读取了不该读的样式值。
