CSS动画无法平滑过渡display属性，应改用opacity+visibility+transition配合JS在transitionend后移除元素。
animation 无法直接控制 display
想用 @keyframes 把 display 从 block 变成 none？不行。CSS 动画不支持 display 属性的过渡或插值，它只能在动画结束瞬间“啪”一下切换，没有淡出效果，还会导致布局突变或事件监听失效。
常见错误现象：opacity: 0 动完了，紧接着 display: none 立刻生效，元素视觉上没“淡出感”，甚至动画根本没播完就消失了。
- display 是离散属性，浏览器不计算中间状态
- 一旦设为
none，元素脱离渲染树，后续所有样式和动画立即中止 - JavaScript 里查不到该元素的尺寸、位置，
getComputedStyle也返回空
正确做法：opacity + visibility + transition + JS 移除
淡出必须靠 opacity（支持平滑插值），但仅靠 opacity 不够——透明元素仍占位、能响应点击。所以要配合 visibility: hidden（保留盒模型但不可见、不可交互），最后用 JavaScript 在动画结束后调用 remove() 或清空父容器。
关键点在于：不能靠 CSS 自动删 DOM，必须由 JS 控制移除时机。
立即学习“前端免费学习笔记（深入）”；
- 给元素加
transition: opacity 0.3s ease, visibility 0.3s（visibility 支持 transition，但只在visible↔hidden间生效） - 初始状态设
opacity: 1; visibility: visible - 触发淡出时加一个类，比如
.fade-out，里面写opacity: 0; visibility: hidden - 监听
transitionend事件，且检查event.propertyName === 'opacity'（避免 visibility 变化也触发）
.my-element {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s;
}
.my-element.fade-out {
opacity: 0;
visibility: hidden;
}
用 animation 替代 transition 的注意事项
如果坚持用 @keyframes（比如需要更复杂的缓动或多阶段变化），依然不能在帧里写 display: none。可行方案是：
- 动画只控制
opacity和transform（如轻微缩放或位移增强效果） - 最后一帧保持
opacity: 0; visibility: hidden，但不写display - 用
animationend事件，在回调里执行element.remove() - 注意：若元素有子元素监听了
animationend，需用event.target === element过滤，避免冒泡干扰
@keyframes fadeOut {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.98); visibility: hidden; }
}
容易被忽略的细节
很多人以为加了 opacity: 0 就安全了，其实还有几个坑：
- 如果元素有
pointer-events: auto（默认值），即使 opacity 为 0，鼠标悬停或点击仍可能触发——得显式加pointer-events: none（最好在.fade-out类里一起设） - 使用
visibility: hidden后，若父容器设置了overflow: hidden，子元素即使transform移出范围，也可能被裁剪；此时建议改用opacity + pointer-events + remove()组合 - transition 或 animation 时间必须和 JS 移除逻辑严格对齐；不要依赖 “setTimeout(300)” —— 应该用原生事件，否则在高负载或低性能设备上容易提前删 DOM
最稳妥的路径始终是：CSS 负责视觉变化，JS 负责 DOM 生命周期管理。强行让 CSS 承担移除职责，只会让逻辑变得不可控。
