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() 工具函数），比到处打补丁可靠得多。 
