display: none 无法触发CSS过渡，因其为离散属性无中间态；应改用 opacity 与 visibility 组合，显式声明 transition: opacity 0.3s ease, visibility 0s 0.3s，并同步控制两者值及 pointer-events、aria-hidden 等可访问性属性。
直接说结论：display: none 本身无法触发任何 CSS 过渡，浏览器压根不计算中间状态——这不是写法问题，是规范限制。必须换用 opacity 和 visibility 组合，且两者过渡时机要对齐。
为什么 transition: display 0.3s 完全没反应
因为 display 是离散属性，取值只有 none、block、flex 等枚举值，没有“半显示”这种中间态。你写的那行规则在 DevTools 的“计算样式”里根本找不到，不是被忽略，是被浏览器引擎直接丢弃。
常见错误现象包括：
- 元素“啪”一下出现/消失，毫无渐变
- 写了
transition: all 0.3s，但只要涉及display切换，其他属性（比如opacity）的动画也跟着失效 - JS 同步设置
el.style.display = 'block'; el.classList.add('fade-in')，浏览器合并渲染，起始帧丢失
opacity + visibility 的正确写法
关键不是“只加 opacity”，而是两个属性必须协同，并显式声明各自的过渡行为，尤其注意 visibility 的延迟生效时机。
立即学习“前端免费学习笔记（深入）”；
- 初始隐藏态必须同时设：
opacity: 0和visibility: hidden - 过渡声明要包含两者：
transition: opacity 0.3s ease, visibility 0s 0.3s（visibility的0s持续时间 +0.3s延迟，让它卡在opacity动画结束那一刻才切换） - 显示类中要同步改回：
opacity: 1和visibility: visible，并重置transition-delay: 0s - 别漏掉
pointer-events: none在快速切换时防误点（比如用户连点关闭再打开）
动画结束后要不要真设 display: none
取决于你是否需要释放布局空间或满足可访问性要求。
- 如果只是淡入淡出效果，
visibility + opacity已足够，不用碰display - 若父容器有
overflow: hidden，visibility: hidden仍占位，可能撑出滚动条抖动，此时必须监听transitionend事件，在回调里补上：el.style.display = 'none'和aria-hidden="true" - 记得同步清理
tabindex或移除焦点，否则键盘用户可能卡在不可见元素上 - 不要在动画中途手动操作
display，否则会打断整个过渡流程
真正容易被忽略的是：所有这些方案都依赖元素始终在渲染树中。一旦你用 JS 强行删 DOM 或设 display: none 太早，过渡就彻底没了。
