display是离散属性，无法插值导致transition失效；应改用visibility+opacity组合：opacity控制渐变，visibility控制占位与交互，并通过transition-delay协调时机。
为什么display: none会让transition直接失效
因为display是离散属性，浏览器无法在none和block（或flex等）之间计算中间状态。你写的transition: all 0.3s或transition: display 0.3s全无效——元素不是“卡住”，而是压根没启动过渡，直接跳变。
用visibility + opacity替代的实操要点
这是最轻量、兼容 IE9+、语义清晰的方案，但必须注意两者的分工和触发顺序：
-
opacity控制视觉渐变（0 → 1），可被平滑插值 -
visibility控制交互与占位（hidden↔visible），本身不可插值，需靠transition-delay配合时机 - 隐藏时：先降
opacity，等动画快结束再切visibility: hidden，否则opacity: 0后立刻不可见，动画“看不见” - 显示时：先设
visibility: visible（避免点击穿透），再升opacity，否则可能点不到
推荐写法：
.fade-box {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.fade-box.show {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
visibility: hidden和pointer-events: none别混用
两者都让元素“不可点”，但机制完全不同，选错会引发意外交互：
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden：元素仍占文档流位置，子元素默认继承隐藏，且**完全不响应任何事件**（hover/click 都无效） -
pointer-events: none：元素视觉照常（或靠opacity隐藏），但鼠标事件穿透到下层；子元素也继承，但可单独加pointer-events: auto恢复
过渡场景中优先用visibility，只有需要“视觉隐藏但下层可点”（比如遮罩层透出按钮）才考虑pointer-events。
动画结束后要不要真设display: none？
如果只是视觉过渡，visibility + opacity已足够；但若需释放布局空间、减少重排影响、或配合aria-hidden做可访问性控制，就得在动画结束时补一步：
- 监听
transitionend事件，在回调里设display: none - 同时更新
aria-hidden="true"（尤其对模态框、提示框等） - 注意：父容器有
overflow: hidden时，visibility: hidden仍占位，可能导致滚动条抖动，此时必须用 JS 清除
真正复杂的切换（比如折叠面板要收起高度），还得叠加max-height或transform，单靠visibility解决不了空间释放问题。
