transition 对 display 完全无效，因 display 是离散属性，无中间状态可插值；应改用 visibility + opacity 协同过渡，并显式声明两者 transition，动画结束按需设 display: none。
transition 对 display 完全无效，不是卡顿、不是延迟，是浏览器压根不启动过渡逻辑——因为 display 是离散属性，没有中间状态可插值。
为什么 transition: display 0.3s 根本不生效
浏览器只对可计算数值变化的属性做过渡，比如 opacity、transform、max-height。而 display 的取值（none / block / flex）之间没有数学关系，无法生成“50% 显示”这种中间帧。你写的那行规则，在 DevTools 的 computed 面板里都找不到，它被渲染引擎静默丢弃了。
常见错误现象包括：
-
opacity: 0+transition: opacity 0.3s写得再对，只要同时存在display: none，动画就消失 - 用 JS 同步执行
el.style.display = 'block'; el.classList.add('fade-in')，浏览器合并渲染，起始帧丢失 - 父容器设了
overflow: hidden，display: none一上，兄弟元素立刻跳位
用 visibility + opacity 替代的正确写法
这不是简单换一个属性，而是两个属性必须协同、显式声明、节奏对齐：
立即学习“前端免费学习笔记（深入）”；
- 初始隐藏态必须同时设
opacity: 0和visibility: hidden - 过渡声明要包含两者：
transition: opacity 0.25s ease, visibility 0.25s step-end（step-end确保visibility切换卡在opacity动画最后一帧） - 显示时不能只改
opacity，必须同步设visibility: visible，否则元素不可点、不可聚焦 - 避免只写
transition: all—— 它不会自动包含visibility，必须显式列出
典型 CSS：
.fade-el {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
.fade-el.show {
opacity: 1;
visibility: visible;
}
动画结束后要不要真加 display: none
取决于你是否需要释放布局空间或配合可访问性：
- 如果只是淡入淡出、下拉菜单收起这类场景，
visibility + opacity已足够，不用动display - 如果元素内容庞大（如整页弹窗），或父容器有
overflow: hidden导致占位撑开滚动条，则必须在动画结束后补display: none - 监听
transitionend事件，检查event.propertyName === 'opacity'，回调里设element.style.display = 'none'并同步更新aria-hidden="true" - 别忘了清理
tabindex或移除焦点，否则键盘用户可能卡在不可见元素上
真正容易被忽略的是切换目的本身
你到底是要“视觉隐藏”，还是“释放 DOM 占位”，或是“折叠高度”？选错起点，后面全是补丁：
- 想收起高度 → 用
max-height过渡，别碰height: auto - 要高性能滑动 → 改用
transform: translateX()，GPU 加速且不触发重排 - 第三方组件强制依赖
display→ 只能靠 JS 强制触发布局：el.style.display = 'block'; el.offsetHeight; el.classList.add('fade-in')，但高频调用会卡顿
