display: none使transition失效是因为浏览器不对离散属性插值且元素立即从渲染树移除；应改用opacity与visibility组合，通过transition-delay协调时机，并注意可访问性、布局空间及性能场景的适配。
为什么display: none会让transition完全失效
浏览器对display这类离散属性不做插值计算，display: none一设上，元素立刻从渲染树中移除，所有过渡逻辑直接终止——不是卡顿，是压根没启动。哪怕写了transition: all 0.3s，切换时仍是“啪”一下突变。
用opacity和visibility组合替代的实操写法
这是最轻量、兼容性最好（IE9+）、语义最清晰的方案：用opacity控制视觉渐变，用visibility控制交互与占位。关键点不在“同时加”，而在“时机配合”：
-
visibility本身不可过渡，但可以加transition-delay让它在opacity动画结束后才生效，避免闪现或误点 - 默认状态写成：
opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; - 显示类写成：
opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; - 必须显式声明
visibility的transition，否则它会瞬间切换，破坏动画节奏
容易踩的坑：动画中途操作、空间释放、可访问性
这个组合看似简单，但真实项目里翻车最多：
- 用户快速点击关闭又打开 →
visibility: hidden提前应用，导致“闪一下又消失”。解决：监听transitionend并过滤event.propertyName === 'opacity'，或临时加pointer-events: none - 需要像
display: none那样彻底释放布局空间？仅靠opacity + visibility做不到。得补max-height: 0或transform: scaleY(0)，并配overflow: hidden - 屏幕阅读器仍能读取
visibility: hidden的元素。若需真正隐藏语义，必须同步加aria-hidden="true"
什么时候该换别的方案
如果目标是折叠面板、下拉菜单这类有高度变化的组件，opacity + visibility显得单薄：
立即学习“前端免费学习笔记（深入）”；
- 内容高度相对固定 → 优先用
max-height过渡（如max-height: 500px），别碰height: auto，CSS 不支持它的插值 - 要高性能滑入滑出（比如 SPA 页面切换）→ 改用
transform: translateX()，GPU 加速且不触发重排 - 第三方库强制用
display，又想补动画 → 只能靠 JS 强制触发布局：el.style.display = 'block'; el.offsetHeight; el.classList.add('fade-in');，但频繁调用会卡顿
真正难的不是写出过渡，而是判断该保留占位、释放空间，还是绕开 DOM 渲染流——选错方案，后面全是补丁。
