动画结束后元素不会自动消失，需通过animationend事件监听并在JS中设置display: none才能真正移除；CSS animation仅停在最后一帧，不改变布局参与度。
animation动画结束后元素自动消失？不行，得靠visibility或display配合
CSS animation 本身只负责播放关键帧，播完就停在最后一帧——哪怕你最后一帧设了 opacity: 0 或 transform: scale(0)，元素仍占据文档流、能被点击、影响布局。想“真正消失”，必须手动控制可见性或布局参与度。
常见错误现象：animation 播完后元素看起来“没了”，但鼠标悬停仍有响应，或者父容器高度没收缩，说明只是视觉隐藏，没脱离渲染树。
- 用
visibility: hidden可隐藏但保留占位；适合需要快速重显的场景 - 用
display: none才算真正移除；但无法直接写在@keyframes里（CSS动画不支持display过渡） - 正确做法：动画结束时通过
animationend事件监听，在 JS 中补上display: none
如何用JS监听animation结束并移除元素
不能依赖 setTimeout 硬等，因为动画可能被用户缩放、系统性能拖慢，或被 CSS animation-delay / animation-duration 动态修改。必须用原生事件。
注意：animationend 在 Firefox 中叫 animationend，Chrome/Safari 是 animationend（已统一），但旧版 Safari 曾用 webkitAnimationEnd；现代项目可只写标准事件，除非需兼容 iOS
- 监听前确保元素已挂载 DOM，否则事件绑定无效
- 动画名要和 CSS 中
animation-name完全一致（区分大小写） - 移除前建议先清掉
animation相关属性，避免重复触发或样式残留 - 示例逻辑：
element.addEventListener('animationend', () => { element.style.display = 'none'; element.style.animation = 'none'; // 防止重播 });
transition + opacity + display 的替代方案（无JS）
如果只是淡入淡出且不需要复杂关键帧，用 transition 更轻量，还能配合 display 实现“真隐藏”——但得绕一下：先改 opacity，等过渡完再切 display。
问题在于：CSS 无法自动延迟执行 display: none。所以得靠 transitionend 事件，或用 trick：把 display 切换时机交给伪类（如 :not(.show)）+ class 控制，再用 JS 控制 class 切换时机。
- 纯 CSS 不可行；必须 JS 协同
- 推荐组合：
opacity+visibility+transition，比display更安全（无重排） - 若坚持不用 JS，可用
animation-fill-mode: forwards锁定末帧样式，再手动加 class 控制display——但首次触发仍需 JS
容易被忽略的细节：animation-fill-mode 和事件触发时机
animation-fill-mode: forwards 很多人以为它能让元素“保持消失”，其实它只保持最后一帧的 CSS 属性值（比如 opacity、transform），不会让 display 生效，也不会阻止事件冒泡或焦点获取。
另一个坑：animationend 在动画被取消（如 class 被快速移除）、或元素被提前 remove() 时不会触发。务必在绑定前检查元素是否还活着，或用 once: true 配合 addEventListener 防重复绑定。
- 不要在动画未开始时就移除元素，否则
animationend永远不会来 - 多个动画并行时，
animationend会按每个动画名分别触发，别漏判event.animationName - 动画时间含
animation-delay，事件触发时刻是「延迟结束 + 持续时间」之后，不是样式生效那一刻
实际业务中，最稳的路径就一条：用 animation 做视觉动效，用 animationend 收尾清理，该 display: none 就 display: none，别指望 CSS 自己“彻底走人”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
