display 属性不支持 css 过渡，因其为离散值、无法插值，transition 声明会被浏览器直接丢弃；替代方案是 opacity + visibility 组合，并严格控制 transition 时机与顺序。
transition 对 display: none → block 完全不启动
不是卡顿，是浏览器压根不执行过渡流程。因为 display 是离散属性，none 和 block 之间没有数值关系，无法插值——渲染引擎解析到 transition: display 0.3s 时，直接丢弃整条规则。你在 DevTools 的 “Computed” 面板里根本看不到它生效。
为什么 transition: all 0.3s 也救不了 display 切换
transition: all 只是对“支持过渡的属性”批量声明，而 display 不在支持列表里。更麻烦的是：display: none 会让元素彻底脱离渲染树，此时连 opacity、transform 这些本可过渡的属性，也会因失去计算上下文而同步失效。
- 常见错误现象：JS 同步设置
el.style.display = 'block'再加fade-in类，浏览器合并重绘，起始帧丢失 - 父容器设了
display: none，子元素哪怕写了transition: opacity 0.3s，也完全不触发 - 用
!important强行加在transition上，不仅无效，还可能让过渡上下文更不稳定
opacity + visibility 组合必须错开时机
这是目前最可靠、兼容性最好的替代方案，但顺序错了就会“闪一下”或出现“悬停可点但不可见”的 bug。
- 初始隐藏态写全：
opacity: 0+visibility: hidden+pointer-events: none - 过渡声明必须拆开：
transition: opacity 0.3s ease, visibility 0s 0.3s（visibility延迟 0.3s 才生效） - 显示类中还原：
opacity: 1+visibility: visible+pointer-events: auto，且transition-delay: 0s - 如需真正释放布局空间，必须监听
transitionend事件，检查event.propertyName === 'opacity'，再设el.style.display = 'none'和aria-hidden="true"
JS 强制触发布局只在万不得已时用
仅限框架约束极强、CSS 层无法修改的场景。核心是打断浏览器的样式计算合并，让它“看到”元素已就位。
- 先设
parent.style.display = 'block' - 立即读一次
parent.offsetHeight（不能用getComputedStyle，必须是 layout 触发属性） - 再操作子元素的
opacity或transform - 慎用于滚动中高频展开/收起——否则引发重排卡顿
所有方案都依赖元素始终保留在渲染树中。一旦你提前删 DOM、或过早设 display: none，过渡就彻底没了——不是没效果，是根本没机会启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
