display 属性无法触发 css transition，因其为离散枚举值，无中间状态可插值；应改用 visibility + opacity 组合并分别声明 transition，且 js 操作需强制重排、清理和无障碍处理。
transition 对 display 完全无效，不是写错了，是浏览器压根不处理——你写的 transition: display 0.3s 会被静默丢弃，DevTools 的 Computed 面板里都找不到这条规则。
display 是离散属性，没有中间状态可插值
浏览器动画引擎只对可插值（interpolatable）的数值型属性做过渡计算，比如 opacity（0→1）、transform（translateX(0px)→translateX(100px)）。而 display 的取值是枚举型：none、block、flex……之间不存在“半显示”这种中间值。从 display: none 到 display: block，没有“0.5个 block”这种状态，所以过渡逻辑直接跳过。
常见错误现象：
- 写了
transition: all 0.3s，但display切换仍是“啪一下”出现/消失 - 用 JS 改
el.style.display = 'block'后加类，动画仍不触发——因为渲染队列被合并，起始帧被跳过
为什么 visibility + opacity 组合必须显式声明两者 transition
单靠 opacity 会挡点击；单靠 visibility 没动画。二者必须协同，且各自 transition 声明不能省：
-
opacity控制视觉渐变，需声明时长与缓动：如transition: opacity 0.25s ease -
visibility本身不可插值，但可以配transition-delay让它卡在 opacity 动画结束那一刻才切换：如visibility 0s 0.25s - 初始态必须同时设
opacity: 0和visibility: hidden，否则元素仍占位、抢焦点 - 别用
transition: all偷懒——它不会让display生效，还可能干扰其他属性
JS 操作时最容易漏掉的三件事
哪怕 CSS 写对了，JS 调用不对，动画照样崩：
- 同步改
display和加 class 会合并渲染——必须打断：先设el.style.display = 'block'，再读el.offsetHeight（强制重排），最后加 class - 动画结束没清理：若需彻底释放布局空间，得监听
transitionend事件，过滤event.propertyName === 'opacity'，再执行el.style.display = 'none' - 可访问性被忽略：
visibility: hidden不移除语义节点，必须同步设el.setAttribute('aria-hidden', 'true')
真正难的不是让动画跑起来，而是判断该保留占位、释放 DOM 空间，还是绕开渲染流——选错起点，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
