CSS transition 对 display: none 无效，因 display 是离散属性无中间状态；应改用 opacity 与 visibility 组合动画，并监听 transitionend 事件控制 DOM 卸载。
不能。CSS transition 对 display: none 完全无效——这不是写法问题，而是浏览器规范层面的限制。
为什么 display 属性无法 transition
display 是离散属性，只有 none、block、flex 等互斥值，没有中间状态。浏览器无法计算 “display: none → display: block” 的 30% 过程，因此 transition 直接被忽略。
- 检查开发者工具的“动画”面板，会发现该属性切换无任何过渡记录
- 哪怕你写了
transition: display 0.3s，实际行为仍是瞬时切换 - 所有主流浏览器（Chrome/Firefox/Safari）均严格遵循此行为
替代方案：opacity + visibility 组合
真正可动画、且语义正确的做法是用 opacity 控制视觉可见性，用 visibility 控制交互与布局占位。
-
opacity: 0让元素不可见，但仍在文档流中、仍可响应事件（需配合pointer-events: none） -
visibility: hidden移除交互能力、不捕获事件，但保留布局空间（不会引起下方元素“上跳”） - 二者必须同时设置，并统一写在退出类里，例如：
.fade-out { opacity: 0; visibility: hidden; } - CSS 中必须声明
transition: opacity 0.3s, visibility 0.3s（注意 visibility 也要加 transition，否则 visibility 变化会突变）
JavaScript 控制节奏的关键点
仅靠 CSS 类切换不够，JS 必须等动画结束才真正卸载或复用元素，否则会卡在半透明+不可见状态。
立即学习“前端免费学习笔记（深入）”；
- 添加退出类后，监听
transitionend事件，且过滤propertyName === 'opacity'（避免visibility变化也触发） - 不要在动画开始前就设
display: none，那会让动画直接失效 - React/Vue 中慎用
v-if或ngIf配合 transition，它们默认操作display，应改用v-show+ class 切换 - 如果需要释放 DOM 节点，必须在
transitionend回调里执行移除或display: none
容易被忽略的兼容性细节
看似简单的淡出，在旧版 Safari 或某些 Android WebView 中仍有坑：
-
visibility: hidden在部分 iOS 14 以下版本中，对position: fixed元素可能不阻止滚动穿透 - 若元素含
transform或will-change，叠加opacity: 0可能触发图层合成异常，导致闪屏 -
transition: all 0.3s是危险写法——它会试图过渡所有变化属性，包括那些不可动画的（如z-index），引发意外行为 - 务必为容器设置
overflow: hidden，防止opacity: 0元素内溢出内容干扰布局
