display无法参与transition，因其取值无数值关系不可插值，浏览器直接丢弃该规则；元素设为none时脱离渲染树，导致其他过渡属性失效；正确方案是opacity与visibility协同控制，并用transition-delay错开时机。
因为 display 是离散属性，浏览器根本不计算中间状态，transition 根本不会启动——不是卡住，是压根没机会运行。
display 为什么无法参与 transition
display 的取值（none、block、flex 等）之间没有数值关系，无法插值。浏览器渲染引擎在解析 transition: display 0.3s 时，会直接丢弃这条规则——你在 DevTools 的 “Computed” 面板里根本找不到它。
更关键的是：display: none 会让元素彻底脱离渲染树。一旦脱离，连样式计算都停止，opacity、transform 等本可过渡的属性也一并失效。
- 写
transition: all 0.3s没用，只要涉及display切换，整个过渡链就断了 - JS 同步设置
el.style.display = 'block'再加el.classList.add('fade-in')，浏览器会合并重绘，起始帧丢失 - 父元素设了
display: none，子元素哪怕写了transition: opacity 0.3s，也完全不触发
opacity + visibility 组合怎么写才对
必须两个属性协同控制，且过渡时机要错开：让 visibility 在 opacity 动画结束那一刻才切换，否则会出现“闪一下”或“悬停可点但不可见”的问题。
- 初始隐藏态：
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"
如果非要用 display，JS 怎么强制触发布局
仅限框架约束强、无法改 CSS 的场景。核心是打断浏览器的批量优化，让它“看到”元素已就位。
- 先设
parent.style.display = 'block' - 立即读一次
parent.offsetHeight（不能用getComputedStyle，必须是 layout 触发属性） - 再操作子元素的
opacity或transform - 慎用于滚动中高频展开/收起，否则引发重排卡顿
容易被忽略的 DOM 生命周期细节
所有方案都依赖元素始终保留在渲染树中。一旦你提前删 DOM、或过早设 display: none，过渡就彻底没了——不是没效果，是根本没启动。
更隐蔽的是：动画结束但没清理 tabindex 或焦点状态，键盘用户可能卡在不可见元素上；父容器有 overflow: hidden 时，visibility: hidden 仍占位，可能引发滚动条抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
