CSS动画与JS直接改style会冲突，因内联样式优先级高于动画计算值；应统一用Web Animations API（element.animate()）或通过animation-play-state配合JS管控，避免混用。

CSS 动画和 JS 直接改 style 属性会冲突

当 CSS 动画（如 @keyframes + animation）正在运行时，JS 用 element.style.transform = 'translateX(100px)' 或 element.style.opacity = 0.5 强制写内联样式，浏览器会优先应用内联样式，导致动画“突然跳变”或直接中断。这不是 bug，而是 CSS 优先级规则：内联样式 > CSS 动画的计算值。

• 常见现象：animation 正在播放位移，JS 设置 style.left 后元素瞬间跳到新位置，动画停止
• 根本原因：CSS 动画生成的是“计算样式”，而 JS 写 style.xxx 是覆盖层，两者不协同
• 避免混用：不要一边用 animation 控制 transform，一边用 JS 改 style.transform

统一用 element.animate()（Web Animations API）接管全部动画

这是目前最干净的解法：完全绕过 CSS 动画声明和内联 style 冲突，所有动画逻辑由 JS 控制，但渲染仍走合成层（性能不输纯 CSS 动画）。

• 支持主流现代浏览器（Chrome 36+、Firefox 48+、Safari 17.4+、Edge 79+）
• 可随时暂停、反向、调整时间、监听结束事件，比 CSS 动画灵活得多
• 动画参数直接传对象，不污染 class 或 style

const anim = element.animate(
  [
    { transform: 'scale(1)', opacity: 1 },
    { transform: 'scale(1.2)', opacity: 0.8 }
  ],
  {
    duration: 300,
    easing: 'ease-out',
    fill: 'forwards'
  }
);

// 后续可控制
anim.pause();
anim.reverse();
anim.currentTime = 150; // 跳到中间

如果必须保留部分 CSS 动画，用 animation-play-state 配合 JS 管控

适用于已有大量 CSS 动画类（如 .fade-in、.slide-up），无法全量迁移到 JS 的场景。关键不是禁用动画，而是让 JS 有“开关权”。

• 给需要 JS 控制的元素加统一 class，比如 js-controlled
• CSS 中用 .js-controlled { animation-play-state: paused; } 默认暂停
• JS 触发时调用 element.style.animationPlayState = 'running'，结束后设回 'paused'
• 注意：不能靠 element.classList.add('fade-in') 后立刻读取动画状态——要等下一帧，可用 requestAnimationFrame

慎用 transition 和 JS 同时操作同一属性

transition 虽然不算“动画”，但和 JS 改 style 同样存在竞争。例如设置 transition: all 0.3s，再用 JS 快速连续改 style.width，会出现过渡叠加、延迟响应甚至卡顿。

• 解决方案：只对明确需要过渡的属性单独声明，比如 transition: opacity 0.2s, transform 0.2s，禁用 all
• JS 批量变更时，先移除 transition（element.style.transition = 'none'），改完再恢复
• 更稳妥：用 getComputedStyle(element).transform 读当前值，基于它做增量计算，而不是硬编码目标值

真正难处理的不是“怎么动”，而是“谁在动、什么时候动、动完还在不在”。动画控制权一旦分散，就容易出现视觉撕裂或状态不一致——尤其在用户快速交互、动画未完成就触发下一次操作时。留一个统一入口（比如封装好的 animate() 工具函数），比到处打补丁可靠得多。