display属性无法触发CSS过渡，因其无中间状态；应使用opacity+visibility组合实现淡入淡出，或用max-height模拟display:none的布局效果，必要时通过JS在transitionend后设置display。
display 属性本身无法触发 CSS 过渡
直接对 display 设置 transition 完全无效——浏览器不支持该属性的插值计算，无论写 transition: display 0.3s ease 还是加了 !important 都没用。这是最常踩的坑，很多人卡在这一步就以为是写法错了。
真正能过渡的是视觉可见性相关的属性，比如 opacity、transform、height（需有明确数值）、max-height 等。而 display 是离散控制（none / block / flex…），没有中间状态。
用 opacity + visibility 组合实现“伪淡入淡出”
这是最轻量、兼容性最好、也最贴近“淡入淡出”语义的做法。关键在于：用 opacity 控制透明度动画，用 visibility 解决 opacity: 0 仍占布局空间的问题，并配合 transition-delay 错开切换时机。
-
visibility: hidden会让元素不可见且不响应事件，也不影响布局，但本身不可过渡；所以必须和opacity配合 - 淡入时：先设
visibility: visible（立即生效），再通过opacity从 0→1 过渡 - 淡出时：先用
opacity从 1→0 过渡，等动画结束（用transitionend或延时）再设visibility: hidden，否则会瞬间消失 - 推荐写法：
.fade-element { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; } .fade-element.show { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
需要隐藏后彻底脱离文档流？用 max-height 替代 display none
当必须让元素在隐藏时完全不占空间（比如下拉菜单、折叠面板），又想带高度过渡效果，max-height 是更稳妥的选择——它可过渡，且能模拟 display: none 的布局行为。
立即学习“前端免费学习笔记（深入）”；
- 给元素设一个足够大的
max-height（如max-height: 500px），并确保内容实际高度远小于此值 - 隐藏状态设
max-height: 0+overflow: hidden，避免内容溢出 - 注意：不能用
height: 0，因为height在 auto 布局下无法过渡；max-height是折中但可靠方案 - 示例：
.collapsible { max-height: 500px; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; } .collapsible.closed { max-height: 0; opacity: 0; } - 缺点：过渡时间与内容高度强相关；若内容动态变化，需重新计算
max-height，否则动画会卡顿或截断
JavaScript 配合才能真正“切换 display”
如果业务逻辑硬性要求在动画结束后才改变 display（比如避免 SSR 水合 mismatch、或某些第三方库依赖 display 判断状态），就必须用 JS 监听 transitionend 后手动设置。
- 不要在 CSS 中写
display: none→display: block的过渡，而是用 class 控制opacity和visibility，JS 负责最终的display切换 - 示例逻辑：
element.classList.add('fading-out'); element.addEventListener('transitionend', () => { if (element.classList.contains('fading-out')) { element.style.display = 'none'; } }, { once: true }); - 容易忽略的一点：多个属性同时过渡时（如 opacity + transform），
transitionend可能触发多次，要用event.propertyName判断是哪个属性结束，否则可能误操作
display: none——它不该参与动画，只该作为收尾动作，在视觉过渡完成后再由 JS 或伪类精确控制。 
