display 不能用 transition，因其取值离散、无法插值；应改用 opacity+visibility 组合，注意 visibility 需延迟切换以配合 opacity 动画，并在必要时用 JS 监听 transitionend 或配合 aria-hidden 等方案补足。
为什么 display 不能用 transition
display 是一个离散属性，它的取值（如 block、none、flex）之间没有中间状态，浏览器 无法插值计算过渡帧。所以即使写了 transition: display 0.3s，实际也完全无效——元素会立刻显示或消失。
用 opacity + visibility 替代的实操要点
这是最常用且可靠的视觉隐藏 / 显示过渡方案，但要注意两者的分工和配合时机：
-
opacity控制透明度变化（支持平滑过渡），取值0→1 -
visibility控制是否响应交互和占据空间（不可过渡），取值hidden↔visible - 必须把
visibility改变放在transition结束后，否则初始visibility: hidden会让opacity动画根本看不到
.fade-element {opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; /* visibility 延迟生效 */} .fade-element.show {opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; / 移除延迟，立即可见 / }
常见翻车场景与修复
这个组合看似简单，但实际项目中容易出问题：
- 动画播放中点击关闭，再快速点开 → 出现“闪一下又消失”，因为
visibility: hidden被提前应用。解决：用getComputedStyle检查当前opacity，或加pointer-events: none临时禁用交互 - 父容器有
overflow: hidden，且子元素在opacity: 0时仍占布局空间 → 可能导致滚动条抖动。解决：过渡完成后才设display: none（用 JS 监听transitionend） - 需要支持键盘焦点（如模态框）→
visibility: hidden不移除可访问性树中的节点，要用aria-hidden="true"配合控制
更彻底的替代：用 max-height 或 transform 做高度 / 位移过渡
如果目标是下拉菜单、折叠面板这类有高度变化的组件，opacity+visibility 显得单薄。此时优先考虑：
立即学习 “ 前端免费学习笔记（深入）”；
-
max-height+overflow: hidden：适合内容高度相对固定的情况，设一个足够大的max-height（如500px），避免用height: 0—— 因为height本身也不支持过渡到auto -
transform: scaleY(0)+transform-origin: top：性能更好，GPU 加速，且天然不占文档流，但需注意子元素transform可能被继承影响
真正难处理的是“既要隐藏又要释放空间，还要可过渡”的需求——这时候就得接受：CSS 过渡做不到一步到位，必须靠 JS 补位。
