必须等动画自然结束或被取消后再删除DOM节点，否则动画中断、节点残留；应监听finish和cancel事件统一执行remove()，并设置fill:'forwards'确保末帧样式生效。
直接调用 element.animate() 后立刻 remove() 会闪退
动画还没播完，DOM 就被删了，浏览器直接销毁节点，finish 事件都收不到。这不是“没动画”，而是动画根本没机会执行完。常见错误写法：
const anim = el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 });
el.remove(); // ❌ 立即移除，动画中断，视觉上就是闪一下
必须等动画真正结束（或至少进入不可见状态）再删节点。关键不是“加动画”，而是“控制删除时机”。
用 anim.addEventListener('finish', ...) 确保动画播完再删
finish 是最可靠的信号：它只在动画自然走完、未被 cancel() 或 pause() 中断时触发。别用 onfinish = () => {}——只能绑定一次，后续覆盖就丢逻辑。
- 动画参数建议设
fill: 'forwards'，确保最后一帧样式（如opacity: 0）持续生效，避免删前一帧还残留可见态 - 删之前可加个
el.style.pointerEvents = 'none'，防止用户在动画中途点击触发其他行为 - 如果元素有事件监听器，删之前手动
el.removeEventListener()或用事件委托，否则可能内存泄漏
示例：
立即学习“前端免费学习笔记（深入）”；
const anim = el.animate(
[{ opacity: 1, transform: 'scale(1)' }, { opacity: 0, transform: 'scale(0.95)' }],
{ duration: 250, fill: 'forwards' }
);
anim.addEventListener('finish', () => {
el.remove(); // ✅ 此时动画已稳稳结束
});
需要支持取消或提前中止？得同时监听 cancel 事件
用户快速连续操作、页面切后台、或 JS 主动调用 anim.cancel() 都会导致 finish 不触发。若不处理，节点就永远卡在半透明状态，变成“幽灵元素”。
-
cancel事件在动画被强制终止时触发（比如用户滚动导致 IntersectionObserver 触发、或你手动调用anim.cancel()） - 监听
cancel后，通常也该立即remove()，否则残留 DOM 无法参与后续渲染 - 不要依赖
anim.playState === 'finished'做判断——它在cancel后是'idle'，不是'finished'
健壮写法：
const anim = el.animate([...], { duration: 250, fill: 'forwards' });
const cleanup = () => {
if (el.parentNode) el.remove();
};
anim.addEventListener('finish', cleanup);
anim.addEventListener('cancel', cleanup);
批量删除多个节点时，别用同一个 Animation 对象反复调用
每个 element.animate() 返回独立的 Animation 实例。想给 10 个元素加消失动画，就得调用 10 次 animate()，各自绑定自己的 finish 逻辑。试图复用一个动画对象去控制多个元素，结果只会是：只有最后一个元素响应，其余全失效。
- 循环中务必为每个元素创建新动画：
els.forEach(el => el.animate(...))，不是els.forEach(... => anim) - 如果要统一控制（比如全部播完再执行某回调），可用
Promise.all(animPromises)封装，但注意：Animation不是 Promise，需手动包装成 Promise - 对大量节点，避免一次性触发全部动画——可能造成短时渲染压力。可加
setTimeout或requestAnimationFrame微调启动间隔
真正容易被忽略的是：动画结束后 DOM 节点是否真被移除了，还是只是“看不见了”。opacity: 0 不等于不存在，它仍占布局空间、响应事件、影响性能。删节点这一步，不能省，也不能靠 CSS 隐藏代替。
