display 是非连续性属性，浏览器无法插值计算，故 transition 在 display:none 时完全不触发；应改用 opacity+visibility 组合实现平滑过渡。
transition 为什么在 display:none 时完全不触发
因为 display 是一个**非连续性属性**，浏览器无法对 display: none 和 display: block（或其它值）之间做插值计算。CSS 动画/过渡引擎直接跳过它——不是卡顿，是压根不执行 transition。
常见错误现象：display: none → display: block 加了 transition: all 0.3s，结果还是瞬间出现/消失，毫无过渡感。
真正起作用的过渡必须基于可计算的数值型属性，比如 opacity、transform、height（需有明确初始/终值）等。
用 opacity + visibility 替代的实操要点
visibility 控制是否响应交互且保留布局空间，opacity 控制视觉透明度；二者组合能模拟“显示/隐藏”效果，同时支持平滑过渡。
-
visibility: hidden+opacity: 0→ 视觉不可见、不响应点击、保留占位 -
visibility: visible+opacity: 1→ 完全可见且可交互 - 必须同时给
opacity和visibility设置transition，但注意：visibility本身不能过渡，它只是配合opacity避免半透明状态下的误点 - 推荐写法：
transition: opacity 0.3s ease, visibility 0.3s—— 后者实际是“延迟生效”，靠浏览器自动处理切换时机
示例：
.fade-box {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.fade-box.show {
opacity: 1;
visibility: visible;
}
visibility: hidden 与 pointer-events: none 的区别
两者都让元素“不可点”，但机制完全不同，选错会导致交互异常。
-
visibility: hidden：元素仍占据文档流位置，子元素继承隐藏（除非显式设visibility: visible），且**不会响应任何事件**（包括hover、click） -
pointer-events: none：元素视觉照常显示（或配合opacity隐藏），但鼠标事件穿透到下层；子元素默认也继承，但可单独设pointer-events: auto恢复 - 过渡场景中优先用
visibility，避免因事件穿透引发意外交互；只有需要“视觉隐藏但保持下层可点”时才考虑pointer-events
更稳妥的隐藏方案：加 transform 避免重排
仅靠 opacity + visibility 能解决过渡，但如果元素内容复杂、频繁切换，可能触发不必要的布局计算（layout thrashing）。此时建议叠加 transform: scale(0.99) 或 translateZ(0) 强制使用 GPU 图层。
- 加
will-change: opacity, visibility可提前提示浏览器优化，但不要滥用（会增加内存开销） - 如果隐藏后完全不需要占位，用
position: absolute; opacity: 0; visibility: hidden;配合transition更安全 - 切记：不要在
display: none状态下尝试触发transition，哪怕加了setTimeout强制重排也没用——浏览器已丢弃该节点的渲染上下文
最易被忽略的一点：visibility 的过渡时间必须和 opacity 一致，否则会出现“先闪一下再淡入”或“悬停时突然可点”的断裂感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
