JS移除含animation声明的类会导致动画立即终止且无法恢复。常见于v-if切换、React重渲染、classList.remove误操作等，应分层管理类名或用animation-play-state控制启停。
animation-iteration-count: infinite 被 JS 移除类名直接废掉
写了 infinite 却只播一次，八成不是 CSS 写错了，而是 JavaScript 在动画中途把带 animation 声明的类给 classList.remove() 了。浏览器一看到这个类没了，立刻终止当前动画实例，中间状态全丢，哪怕你下一毫秒又加回去，它也不认。
常见触发场景：
-
v-if切换或key变化导致 Vue 组件重渲染，DOM 节点被销毁重建 - React 中
setState引发该元素 unmount → remount - 手动调用
el.classList.remove('animate-bounce')后忘记补回，或条件判断漏掉 - 动画类和控制显隐的类混在同一个 classList 操作里，比如
el.className = 'hidden bounce'直接覆盖
如何确认是 JS 移除了关键类
别猜，直接看 DevTools 的 Elements 面板——选中元素，在 Styles 标签页里搜索 animation，观察它是否稳定存在；再切到 Event Listeners，检查有没有监听 click、transitionend 等事件后执行了类操作。
更准的办法是控制台跑这句：
立即学习“Java免费学习笔记（深入）”；
getComputedStyle(el).animationName
如果返回 'none' 或空字符串，说明动画已被 JS 显式禁用（比如 el.style.animation = ''）或类已丢失。
容易忽略的点：
- 某些 UI 库（如 Ant Design）的
destroyOnClose或unmountOnExit会悄悄删 DOM - 用
el.setAttribute('class', ...)替代classList.add/remove，会清空所有类 - 第三方脚本（如广告 SDK、A/B 测试工具）可能偷偷操作 classList
JS 控制动画类时必须守住的底线
只要动画要重复触发，就绝不能让承载 animation 声明的类离开元素。最稳做法是分层管理：
- 基础类（永不移除）：比如
animated-base，里面只写animation: ... infinite;和必要前缀 - 状态类（可切换）：比如
is-bouncing，只负责激活 keyframes 名，不带 animation 声明 - 避免直接操作
style.animation，改用classList.toggle('animated-base')+requestAnimationFrame做延迟同步
若必须动态启停，用 animation-play-state: paused/running 替代增删类——它不会中断动画上下文，也不会丢掉当前进度。
为什么 setTimeout(0) 有时也不管用
加了 setTimeout(() => el.classList.add('bounce'), 0) 还是没反应？那大概率是类名本身没生效，或者动画根本没被触发过。原因包括：
- 元素初始是
display: none或visibility: hidden，动画不会自动启动 - keyframes 里漏了
0%或100%，浏览器认为“无变化”，直接跳过 - 动画属性不可动画（比如
height: auto、display），浏览器静默失败 - 父元素有
will-change: transform且未正确触发合成层，导致动画被降级或卡死
真正可靠的重播方式不是靠延迟，而是确保每次触发前，元素处于「可动画状态」：可见、在文档流中、关键帧定义完整、且 animation 声明始终挂载在计算样式里。
