display不能直接用transition过渡，因为它是离散值而非连续可插值属性；替代方案包括opacity+visibility组合、max-height+overflow控制高度变化，以及JS监听transitionend事件精准控制时机。
display 为什么不能用 transition 直接过渡
因为 display 是离散值（none / block / flex 等），不是连续可插值的属性，浏览器无法计算中间状态。你写 transition: display 0.3s，它完全不生效——连 warning 都不会报。
替代方案：用 opacity + visibility 组合控制显隐
这是最常用、兼容性好、行为可控的做法。核心是把「是否渲染」和「是否可见」拆开处理：
-
visibility: hidden让元素保留布局空间但不可见，opacity: 0配合transition实现淡入淡出 - 真正要“移除”时，再用 JS 在动画结束后设
display: none；显示前先设display: block（或原值），再触发动画 - 注意：必须同时设
visibility和opacity，否则visibility: hidden会立即生效，盖掉过渡效果
示例：
button {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s step-end;
}
button.show {
opacity: 1;
visibility: visible;
}
step-end 是关键——它让 visibility 在过渡结束瞬间才切换，避免闪现。
立即学习“前端免费学习笔记（深入）”；
需要真正“销毁 DOM”时，用 height + overflow 配合 transition
适用于下拉菜单、折叠面板这类有高度变化的场景。直接对 height 做过渡，但要注意：
-
height: auto无法过渡，得用具体数值（如height: 0→height: 200px）或max-height替代 -
max-height更实用：设一个远大于内容的值（如max-height: 500px），再过渡max-height: 0→max-height: 500px - 配合
overflow: hidden，防止内容溢出；过渡时间别太长，否则max-height的“假高度”会让动画看起来拖沓
JS 控制时机比 CSS 更可靠
CSS 过渡靠类名切换，但真实项目里常要等动画结束才执行后续逻辑（比如卸载组件、释放资源）。这时候不能只靠 setTimeout 硬等：
- 监听
transitionend事件，但注意它可能触发多次（每个过渡属性一次），要过滤目标属性：if (e.propertyName === 'opacity') -
display: none必须在opacity或max-height过渡完成后同步设置，否则可能被浏览器优化掉帧 - 如果元素频繁显隐，记得清除之前未完成的定时器或事件监听，避免内存泄漏
最易忽略的一点：所有这些方案都依赖「元素已渲染且尺寸可读」。如果在 Vue/React 初始挂载时立刻 show，可能拿不到 offsetHeight，得用 requestAnimationFrame 或 setTimeout(fn, 0) 延迟一帧。
