transition 对 display 无效，因 display 是离散属性，浏览器无法插值；应改用 opacity + visibility 组合，并配 step-end 实现平滑过渡。
transition 为什么对 display 无效
display 是一个离散属性，浏览器无法在 none 和 block（或其他值）之间插值计算中间状态，所以加了 transition 也完全不会动。常见错误是写成这样：
div {
display: none;
transition: display 0.3s ease;
}
div.show {
display: block;
}
结果就是切换瞬间完成，毫无过渡，还可能因重排导致布局跳动。
opacity + visibility 是更稳妥的组合
opacity 可过渡、视觉上渐变；visibility 控制是否响应交互和占据空间。两者配合能兼顾动画效果与功能正确性。
-
opacity: 0时元素仍占位、仍可被聚焦或接收事件（除非额外设pointer-events: none） -
visibility: hidden会隐藏但保留布局空间，且子元素无法被交互 - 真正需要“彻底移出交互流”时，得靠
visibility: hidden+opacity: 0+pointer-events: none
推荐写法：
立即学习“前端免费学习笔记（深入）”；
div {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
div.show {
opacity: 1;
visibility: visible;
}
注意 step-end 是关键：它让 visibility 在过渡结束帧才切换，避免中间态出现半透明+可交互的异常状态。
transition-delay 配合 visibility 解决闪烁
如果元素从 display: none 切换过来，哪怕只有一帧，也可能触发渲染抖动或闪一下。根本解法是**不碰 display**，但若旧逻辑已用 display 控制显隐，可在 JS 中分两步处理：
- 先移除
display: none，设为visibility: hidden; opacity: 0 - 用
setTimeout(() => { el.classList.add('show') }, 0)触发重绘后再开过渡
或者纯 CSS 方案：用 @keyframes 绕过 transition 限制（适合一次性入场）：
@keyframes fadeIn {
from { opacity: 0; visibility: hidden; }
to { opacity: 1; visibility: visible; }
}
div.show {
animation: fadeIn 0.3s ease forwards;
}
visibility: hidden 的兼容性陷阱
visibility 本身兼容性极好（IE6+），但 visibility: collapse 在 table 元素外行为不一致，非 table 场景别用。另外两个易忽略点：
- 父元素设了
visibility: hidden，子元素设visibility: visible依然不可见（继承不可破） -
visibility: hidden不阻止focus()，元素仍能获得焦点，可能影响键盘导航体验 - 动画结束后的清理：如果后续要彻底移除元素，别只删
show类，记得等transitionend后再设display: none，否则可能闪回
最稳的收尾方式是监听 transitionend，确认 opacity 已到 1 再操作 DOM，而不是依赖时间猜测。
