display不能用transition，因其取值离散、无法插值；应改用opacity+visibility组合，注意visibility需延迟切换以配合opacity动画，并在必要时用JS监听transitionend或配合aria-hidden等方案补足。
为什么
不能用
是一个离散属性，它的取值（如
、
、
）之间没有中间状态，
浏览器
无法插值计算过渡帧。所以即使写了
，实际也完全无效——元素会立刻显示或消失。
用
+
替代的实操要点
这是最常用且可靠的视觉隐藏/显示过渡方案，但要注意两者的分工和配合时机：
控制透明度变化（支持平滑过渡），取值
→
控制是否响应交互和占据空间（不可过渡），取值
↔
必须把
改变放在
结束后，否则初始
会让
动画根本看不到
常见翻车场景与修复
这个组合看似简单，但实际项目中容易出问题：
动画播放中点击关闭，再快速点开 → 出现“闪一下又消失”，因为
被提前应用。解决：用
检查当前
，或加
临时禁用交互
父容器有
，且子元素在
时仍占布局空间 → 可能导致滚动条抖动。解决：过渡完成后才设
（用 JS 监听
）
需要支持键盘焦点（如模态框）→
不移除可访问性树中的节点，要用
配合控制
更彻底的替代：用
或
做高度/位移过渡
如果目标是下拉菜单、折叠面板这类有高度变化的组件，
+
显得单薄。此时优先考虑：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
+
：适合内容高度相对固定的情况，设一个足够大的
（如
），避免用
—— 因为
本身也不支持过渡到
+
：性能更好，GPU 加速，且天然不占文档流，但需注意子元素
可能被继承影响
真正难处理的是“既要隐藏又要释放空间，还要可过渡”的需求——这时候就得接受：CSS 过渡做不到一步到位，必须靠 JS 补位。
displaytransitiondisplayblocknoneflextransition: display 0.3sopacityvisibilityopacity01visibilityhiddenvisiblevisibilitytransitionvisibility: hiddenopacity.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: hiddengetComputedStyleopacitypointer-events: noneoverflow: hiddenopacity: 0display: nonetransitionendvisibility: hiddenaria-hidden="true"max-heighttransformopacityvisibilitymax-heightoverflow: hiddenmax-height500pxheight: 0heightautotransform: scaleY(0)transform-origin: toptransform