display 不能被 transition 是因为它是离散属性，无中间状态，浏览器无法插值；应改用 opacity+visibility 组合，opacity 控制渐变，visibility 控制交互与占位，并通过 transition-delay 错峰触发。
display 切换时 transition 完全不生效，不是写法问题，是浏览器根本拒绝计算——它压根不支持插值。
为什么 display 不能被 transition
display 是离散属性，取值如 none、block、flex 之间没有中间状态。浏览器无法算出“50% 显示”是什么意思，所以哪怕你写了 transition: display 0.3s，它也会静默忽略，在开发者工具的“Computed”面板里都找不到这条规则的痕迹。
这不是 bug，是 CSS 动画模型的设计限制：只有可插值（interpolatable）的数值型属性才能参与过渡。
opacity + visibility 组合怎么配才不翻车
只用 opacity: 0，元素视觉消失但仍在文档流中，可能挡点击；只用 visibility: hidden，又没渐变效果。二者必须分工+错峰：
立即学习“前端免费学习笔记（深入）”；
-
opacity控制淡入淡出（0 → 1），全程平滑插值 -
visibility控制是否响应事件和占位（hidden↔visible），本身不可插值，得靠transition-delay卡点 - 隐藏时：先降
opacity，等快到 0 时再切visibility: hidden，否则动画“看不见” - 显示时：先设
visibility: visible（防点击穿透），再升opacity，否则点不到
典型写法：
.fade-box {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.fade-box.show {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0s;
}
常见踩坑场景与应对
这个组合看着简单，实际容易在边界条件下崩：
- 快速连点开关 →
visibility: hidden提前触发，导致“闪一下又消失”。解决：加pointer-events: none临时禁用交互，或 JS 监听transitionend再操作 - 父容器有
overflow: hidden→opacity: 0时元素仍占位，可能引起滚动条抖动。解决：动画结束后用 JS 补display: none - 需要键盘焦点（如模态框）→
visibility: hidden不移除可访问性树节点，必须同步设aria-hidden="true" - 想彻底释放布局空间（像
display: none那样）→ 单靠opacity+visibility不够，得加max-height或transform: scaleY(0)配合
什么时候该放弃纯 CSS 过渡
如果你的需求是：“高度从 auto 收起 → 完全不占空间 + 有动画 + 能撑开任意内容”，那 CSS transition 就做不到一步到位。因为 height: auto 不可插值，display 不可过渡，而 max-height 又得预设上限值——这些限制叠加后，往往需要 JS 拿到真实高度再动态设置，才能兼顾准确性和体验。这时候别硬扛，该补位就补位。
