display 无效是因为它是离散枚举值，无中间状态，浏览器静默丢弃 transition 声明；应改用 opacity + visibility 配合 step-end 或 JS 监听 transitionend 精确控制。
Transition 为什么对 display:none 无效
因为 display 是一个**非连续可动画属性**——浏览器无法在 display: none 和 display: block（或其他值）之间计算中间状态。CSS 动画/过渡只能作用于可计算数值的属性，比如 opacity、transform、width、color 等。display 的取值是离散枚举（none / block / flex…），没有“半隐藏”这种中间态，所以 transition 完全被忽略。
你即使写了 transition: display 0.3s，浏览器也会静默丢弃这条声明，DevTools 的 computed 面板里都看不到它生效。
Opacity + visibility 是更稳妥的组合方案
opacity 可过渡、视觉上渐隐渐显；visibility 控制是否响应事件和参与布局流。两者配合才能兼顾动画与功能：
-
opacity: 0时元素仍占位、能响应 pointer-events（除非额外关掉），所以得配visibility: hidden来禁用交互 - 只用
opacity: 0不加visibility，可能造成点击穿透或焦点捕获异常 - 过渡结束前就切回
visibility: visible，会导致闪一下（因为 opacity 还没到 1）；正确做法是等 opacity 动画完成再改 visibility
典型写法：
立即学习“前端免费学习笔记（深入）”；
.fade-element {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
注意 step-end：让 visibility 在 opacity 动画**最后一帧才切换**，避免提前显示导致闪烁。
用 JavaScript 控制过渡时机比纯 CSS 更可靠
纯 CSS 切换 class 很难精确同步 visibility 和 opacity 的节奏，尤其涉及多次快速开关时。推荐用 JS 监听 transitionend 事件来收尾：
- 隐藏时：先设
opacity: 0→ 等transitionend触发 → 再设visibility: hidden+display: none（如果真要释放布局空间） - 显示时：先设
visibility: visible+display: block→ 强制重排（offsetHeight）→ 再设opacity: 1 - 不用
setTimeout模拟延迟，它不准确，且和实际动画时长脱钩
关键点：offsetHeight 是强制浏览器同步计算布局，确保 visibility 生效后再触发动画，否则 opacity 可能直接跳变。
Visibility: hidden 和 display: none 的实际差异不能模糊处理
很多人以为 visibility: hidden 就是“看不见的 display: none”，其实不是：
-
visibility: hidden元素仍占据文档流位置、仍可被 JS 获取尺寸、仍会触发 layout（影响性能） -
display: none元素完全脱离渲染树，JS 读offsetHeight得 0，也不参与任何布局计算 - 如果过渡后确实要彻底移出布局（比如侧边栏收起后不占空间），必须最终设
display: none，但这个动作不能参与 transition，只能靠 JS 延后执行
也就是说：过渡阶段用 opacity + visibility，过渡结束后才用 JS 补一刀 display: none —— 这个边界不划清，动画就会卡顿或错位。
