display是离散属性，无法插值导致transition失效；应改用opacity与visibility组合：opacity控制视觉渐变，visibility控制交互与占位，并通过transition-delay协调时机。
transition 对 display 完全无效，不是写错了，是浏览器根本不会处理它——你写的 transition: display 0.3s 会被静默丢弃，DevTools 的 computed 面板里都找不到这条规则。
为什么 display 不能参与 transition
display 是离散属性，取值只有 none、block、flex 等枚举值，没有“半显示”这种中间状态，浏览器无法插值计算过渡帧。一旦设成 display: none，元素立刻从渲染树中移除，所有后续动画逻辑直接终止。
常见错误现象包括：
- 元素“啪”一下出现或消失，opacity 动画也同步失效
- 用 JS 同步设置
el.style.display = 'block'再加fade-in类，浏览器合并渲染，仍无过渡 - 父容器有
overflow: hidden，display: none切换导致兄弟元素跳位
怎么用 opacity + visibility 正确组合
这不是简单换两个属性，而是分工明确、时机对齐的协同控制：
-
opacity负责视觉渐变（0 → 1），必须声明在transition中 -
visibility负责交互与占位控制（hidden↔visible），也必须显式声明进transition，否则会瞬切 - 初始态必须同时设
opacity: 0和visibility: hidden，不能只靠 opacity 隐藏——否则元素仍挡点击、抢焦点 - 推荐写法：
.el { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; }，其中visibility 0s 0.25s表示延迟生效，卡在 opacity 动画结束那一刻
容易踩的坑：delay、step-end、JS 清理缺一不可
看似只是加个 visibility，但真实项目里翻车最多：
- 快速连续开关时出现“闪一下又消失”：因为
visibility: hidden提前应用。解决方法是监听transitionend并过滤event.propertyName === 'opacity'，或临时加pointer-events: none - 动画结束后没释放布局空间：若需像
display: none那样真正卸载，得在transitionend回调里补上el.style.display = 'none'和el.setAttribute('aria-hidden', 'true') - 父容器有
overflow: hidden且子元素占位，会导致滚动条抖动：此时仅靠visibility不够，必须 JS 清理 -
step-end很关键：它让visibility严格卡在最后一帧切换，避免 opacity 还没到 1 就突然可点；但别滥用在所有场景——它会让 visibility 变化显得生硬，适合模态框类控件
真正难的不是写出过渡，而是判断要不要保留占位、是否需要释放 DOM 空间、键盘焦点如何管理、屏幕阅读器是否该跳过——这些决定了你该用 visibility、max-height，还是干脆上 transform + JS 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
