display 属性无法过渡因其为离散型，无中间状态；应使用 opacity + visibility 组合方案，配合 transitionend 事件清理 display 和可访问性属性。
transition 对 display 属性完全无效
因为 display 是离散型属性，没有中间状态可插值。浏览器无法计算 display: none 到 display: block 之间的“0.3个block”，所以哪怕写了 transition: display 0.3s 或 transition: all 0.3s，这条规则也会被静默忽略——DevTools 的 computed 面板里根本查不到它生效的痕迹。
opacity + visibility 是最稳妥的替代方案
这不是权宜之计，而是标准解法：用 opacity 控制视觉渐变，用 visibility 控制交互与布局占位。
-
opacity支持平滑过渡，取值 0～1 可插值 -
visibility本身不可过渡，但能配合transition-delay错开时机，避免半透明时误点 - 必须显式声明两个属性的 transition，不能靠
transition: all偷懒 - 示例写法：
.fade-in { opacity: 1; visibility: visible; transition: opacity 0.2s ease-in; }，.fade-out { opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0s 0.2s; }
需要真正释放布局空间时怎么办
如果元素体积大、或父容器有 overflow: hidden、或影响滚动条高度，光靠 opacity 和 visibility 不够，得在动画结束后补上 display: none。
- 监听
transitionend事件，检查event.propertyName === 'opacity' - 回调里设
element.style.display = 'none'，同时同步更新aria-hidden="true" - 别忘了移除
tabindex或重置焦点，否则键盘用户可能卡在不可见元素上
max-height 过渡是备选，但有明显限制
适用于折叠/展开类场景（如手风琴菜单），但不是通用方案。
- 必须预设一个足够大的
max-height值（如500px），不能用none或fit-content - 内容高度变化大时，过渡节奏会显得不自然（比如从 20px 拉到 480px）
- 需搭配
overflow: hidden，否则展开过程会溢出 - 仍建议加
opacity增强一致性，但要注意两者的 timing 同步
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
