display无法过渡，因其是离散属性，取值间无数值关系不可插值；应改用opacity与visibility组合，通过transition-delay错开时机实现视觉过渡，并在必要时配合max-height或JS控制布局空间释放。
不能直接对 display 做平滑过渡 —— 这是浏览器限制，不是写法问题。 无论你写 transition: display 0.3s 还是 transition: all 0.3s，display: none ↔ display: block 切换都只会瞬时生效，没有中间帧。
为什么 display 无法过渡
display 是离散属性：它的取值（none、block、inline 等）之间没有数值关系，浏览器无法插值计算“半隐藏半显示”的状态。CSS transition 只能作用于可动画化（interpolable）的属性，比如 opacity、height、transform。
用 opacity + visibility 替代 display 的实操要点
核心是视觉隐藏 + 交互屏蔽 + 布局控制三者同步：
-
opacity: 0控制淡出，支持transition；opacity: 1恢复可见 -
visibility: hidden防止元素被点击或聚焦（opacity: 0时仍可点中）；visibility: visible恢复交互 -
visibility本身不支持平滑过渡，所以要用transition-delay错开时机：先等opacity过渡完，再切visibility - 示例 CSS：
.fade-out { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } .fade-in { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
需要收起/展开空间时怎么办
如果元素隐藏后必须释放布局空间（即像 display: none 那样不占位），仅靠 opacity + visibility 不够 —— 它们保留文档流位置。此时得加一层高度控制：
立即学习“前端免费学习笔记（深入）”；
- 给容器设
overflow: hidden，再对height做过渡 - 但
height: auto不能直接过渡，得先用 JS 获取真实高度，再设为固定值（如height: 120px） - 隐藏时：先设
height: 120px→ 过渡到height: 0→ 再设visibility: hidden（防布局抖动） - 显示时反向：先
visibility: visible→height: 0→ 过渡到height: 120px - JS 中监听
transitionend事件时注意防抖，避免重复触发状态切换
最易被忽略的是：visibility: hidden 虽然不占视觉，但仍参与文档流、影响滚动定位（尤其对 position: sticky 元素），若父容器有 overflow: hidden 或高度约束，可能造成裁剪或错位 —— 动手前务必在真实容器结构里验证布局行为。
