transition 对 display:none 完全无效，因为 display 是离散型属性、不可插值；应改用 opacity + visibility 实现“伪过渡”，并配合 JavaScript 控制 display 切换时机以处理布局重排等复杂场景。
transition 对 display:none 完全无效，因为 display 不是可过渡的属性
CSS transition 只能作用于**可计算、可插值**的属性，比如 opacity、transform、width、height 等。而 display 是离散型属性（none / block / flex 等之间无中间状态），浏览器无法生成中间帧，所以加了 transition: display 0.3s 完全被忽略——连 warning 都不报。
用 opacity + visibility 替代 display 实现“伪过渡”
这是最常用且兼容性好的方案：把视觉隐藏和交互禁用拆开处理，让过渡发生在视觉层。
-
visibility: hidden保留布局空间，但不可见、不可交互；visibility: visible恢复 -
opacity: 0控制透明度，配合transition: opacity 0.3s ease实现淡入淡出 - 必须同时设置
visibility和opacity，否则元素在opacity: 0时仍可点击/聚焦
示例：
.fade-box {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
.fade-box.show {
opacity: 1;
visibility: visible;
}
注意：visibility 的 step-end 时间函数是为了让 visibility 在过渡结束瞬间切换（避免中间帧出现“半透明但可交互”的问题）。
立即学习“前端免费学习笔记（深入）”；
需要真正“销毁/重建”的场景，改用 JavaScript 控制 class 切换时机
如果元素需要彻底脱离文档流（比如菜单收起后不占空间、不参与 layout）、或依赖 display: none 触发某些 JS 行为（如 getBoundingClientRect() 返回 { width: 0, height: 0 }），就不能只靠 CSS 过渡。
- 先用
opacity和visibility动画退出 - 监听
transitionend事件，在动画结束后再移除元素或设display: none - 入场时反向操作：先设
display: block（或其他所需值），再加show类触发过渡
关键点：不要在动画进行中修改 display，否则会中断过渡甚至导致跳变。
其他容易踩坑的细节
几个常被忽略但直接影响效果的问题：
- 过渡属性必须写在「初始状态」里，而不是只写在「目标状态」——否则入场动画有效，退场没动画
-
height或max-height过渡要小心：设固定height值才能插值；用max-height时需预估足够大的值（如max-height: 500px），否则收缩太快或卡住 - 使用
transform: scale(0)+opacity组合比直接改width/height性能更好，尤其在移动端 - 若用
will-change: opacity，记得在动画结束后重置，避免持续占用合成层资源
真正麻烦的从来不是“怎么加 transition”，而是“什么时候该放弃 transition，转交 JS 控制生命周期”。display 的不可过渡性，本质是在提醒你：这个切换背后是否涉及布局重排、资源释放或状态同步——这些往往超出了纯 CSS 的能力边界。
