display不能参与transition，因其取值无中间状态且css规范明确排除；应改用opacity+visibility组合，显式声明两者过渡并协同控制节奏。
因为 display 是离散属性，浏览器根本不支持插值计算——你写的 transition: display 0.3s 会被静默丢弃，DevTools 的 computed 样式里压根找不到它。
display 为什么不能参与 transition
display 的取值（none、block、flex 等）之间没有中间状态，比如不存在 “50% block” 或 “0.3 none”。浏览器动画引擎只处理可插值的数值型属性，display 不在其中。这不是 bug，是 CSS 规范明确排除的行为。
常见错误现象包括：
-
transition: all 0.3s下，只要涉及display切换，整个过渡就“啪”一下跳变 - 写了
transition: display 0.3s，但元素始终无动画，computed 面板里查不到这条规则 - JS 同步设置
el.style.display = 'block'再加show类，起始帧直接丢失
opacity + visibility 组合怎么写才真正生效
这不是简单替换属性，而是两个属性必须协同控制、显式声明、节奏对齐：
- 初始态必须同时设
opacity: 0和visibility: hidden，不能只靠opacity隐藏——否则仍挡点击、抢焦点 -
transition必须显式列出两者：transition: opacity 0.25s ease, visibility 0s 0.25s -
visibility 0s 0.25s表示延迟生效，让它卡在opacity动画结束那一刻切换，避免半透明时误点 - 显示态要同步改回
opacity: 1和visibility: visible，并重置transition-delay: 0s - 千万别只写
transition: all——它不会自动包含visibility，必须手动列出来
动画结束后要不要真设 display: none
取决于你是否需要释放布局空间或满足可访问性要求：
- 如果只是淡入淡出效果，
visibility + opacity已足够；visibility: hidden仍占位，但不影响视觉和交互 - 如果内容庞大（如整页弹窗），或父容器有
overflow: hidden，visibility: hidden可能撑出滚动条抖动——这时必须监听transitionend事件 - 在回调中过滤
e.propertyName === 'opacity'，再执行el.style.display = 'none'和el.setAttribute('aria-hidden', 'true') - 入场时反向操作：先设
display: block（或原值），再加类触发过渡；别在动画中途手动操作display，否则会中断过渡
真正难的不是让动画动起来，而是判断该保留占位、释放空间，还是绕开渲染流——这些决策点，往往比 CSS 规则本身更影响最终体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
