直接加 display: none 不会触发淡出动画，因为 display 是离散属性，浏览器无法插值过渡；必须用 opacity + transform 实现视觉淡出，再通过 animationend 事件清理 DOM 并设置 display: none、pointer-events: none 和 aria-hidden="true"。
为什么直接加 display: none 不会触发淡出动画
因为 display 是离散属性，浏览器无法对 display: block → display: none 做插值过渡。你写 transition: display 0.3s 或在 @keyframes 里设 display: none，它完全无效——元素会瞬间消失，没动画。
常见错误现象：加了动画类但元素“啪”一下没了，控制台没报错，动画根本没播。
- 必须用可动画的属性打头阵：优先选
opacity（支持渐变） +transform（避免点击残留） -
visibility: hidden可以配合opacity用，但它本身不能过渡，只能硬切（比如在100%关键帧里直接写） - 动画播完后，
opacity: 0的元素仍占位、可点击、屏幕阅读器还能读——这不是“销毁”，只是“看不见”
怎么写一个真正可用的淡出销毁动画
核心是两步：先视觉淡出 + 位移收尾，再 JS 清理 DOM 状态。CSS 只管前半段，后半段必须交由 JS。
示例动画定义（推荐命名不冲突）：
立即学习“前端免费学习笔记（深入）”；
@keyframes alert-fade-out {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-10px) scale(0.95);
/* 注意：这里不写 visibility 或 display */
}
}- 加
transform是为了防止opacity: 0后仍响应点击（尤其弹窗、提示框） - 动画时长建议设为
300ms左右，和多数 UI 框架默认一致，避免突兀 - 别用 Bootstrap 的
.fade类——它只控制初始显隐，且依赖.show手动触发，和自动销毁逻辑冲突
如何用 animationend 安全移除元素
不能靠 setTimeout 硬等，系统延迟、动画被暂停、或用户切到后台都可能导致时间不准。必须监听原生事件。
- 确保绑定前元素已挂载到 DOM，否则事件不触发
- 监听时检查
event.animationName === 'alert-fade-out'，避免多个动画互相干扰 - 移除前清掉
animation相关样式，防止重复触发或残留渲染状态 - 最终清理要三件套：
display: none（彻底退出布局）、pointer-events: none（防误点）、aria-hidden="true"（语义隐藏）
简短实操代码：
element.addEventListener('animationend', (e) => {
if (e.animationName !== 'alert-fade-out') return;
element.style.display = 'none';
element.style.pointerEvents = 'none';
element.setAttribute('aria-hidden', 'true');
element.style.animation = 'none'; // 防止重播
});容易被忽略的兼容性与可访问性细节
动画销毁不是“播完就结束”的事。很多项目卡在最后一环：视觉没了，但辅助技术或交互层还连着。
- iOS Safari 对
animationend支持稳定，但旧版需补webkitAnimationEnd；2026 年起可只写标准事件 -
opacity: 0元素仍会被屏幕阅读器朗读，不加aria-hidden="true"会破坏可访问性 - 如果元素有焦点（比如警告框带关闭按钮），动画过程中需手动
element.blur()，否则焦点悬空 - 父容器若用
flex或grid布局，display: none后高度不会自动收缩——确认父级没设固定min-height或其他约束
最常漏掉的是：动画结束 ≠ 元素状态归零。少一步 display: none 或 aria-hidden，就可能在自动化测试或残障用户场景中暴露问题。
