display不可过渡，浏览器静默丢弃transition规则；应显式声明可动画属性，opacity与visibility需协同控制，并在transitionend后手动切换display以彻底卸载DOM。
display 是离散属性，浏览器根本不计算中间状态
你写的 transition: display 0.3s 不是“没效果”，而是被浏览器静默丢弃——display 的取值（none、block、flex）之间没有数学关系，无法插值。就像不能给“苹果→香蕉”算出 50% 的中间水果一样，浏览器连过渡帧都不会生成，DevTools 的 Computed 面板里根本找不到这条规则。
transition: all 会悄悄放过 display，但你发现不了
transition: all 0.3s 看似省事，实际埋雷：只要样式变更涉及 display、visibility、height: auto 或 z-index，这些属性就静默失效，且不报错、不警告。更稳妥的做法是显式列出可动画属性：
transition-property: opacity, transform, background-color;
查 MDN 时盯紧「Animatable」字段是否为 ✅；在 DevTools Styles 面板中鼠标悬停 transition，如果提示 “Transition will not be applied to display”，就是明确信号。
opacity + visibility 组合必须协同声明，不能只改一个
只设 opacity: 0 而不配 visibility: hidden，元素仍挡点击、抢焦点；只设 visibility: hidden 而不声明 transition，它就会瞬间切换，破坏动画节奏。正确写法要同时控制两者：
立即学习“前端免费学习笔记（深入）”；
- 初始态：
opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; - 显示态：
opacity: 1; visibility: visible; -
visibility 0s 0.25s表示延迟生效，卡在opacity动画结束那一刻，避免半透明时误点
真正难的不是写 CSS，而是决定要不要释放 DOM 占位空间
用 opacity 和 visibility 只解决了“视觉过渡”，但元素仍占布局空间、参与重排、影响滚动条。若需像 display: none 那样彻底卸载：
- 退场时监听
transitionend，过滤event.propertyName === 'opacity'后再执行el.style.display = 'none' - 入场前先设
display: block（或原值），再加过渡类——否则起始帧丢失，动画直接跳变 - 别忘了同步处理可访问性：
aria-hidden="true"不能靠visibility: hidden自动解决
DOM 卸载时机和动画完成的错位，才是线上最容易被忽略、却最影响体验的环节。
