display是离散属性，无法插值，故transition对其无效；应改用visibility+opacity协同控制，或用js强制触发布局。
因为 display 是离散属性，浏览器压根不计算中间状态，transition 在它身上完全不启动——不是卡了，是没机会运行。
为什么 display: none 会让 transition 彻底失效
display 的取值（none / block / flex 等）之间没有数值关系，无法插值。哪怕你写了 transition: all 0.3s，浏览器也只会“啪”一下切换，跳过所有帧。这不是 bug，是规范行为。
- 常见错误现象：
opacity: 0+transition: opacity 0.3s写得再对，只要同时存在display: none，动画就消失 - 更隐蔽的问题：用 JS 同步设置
el.style.display = 'block'; el.classList.add('fade-in')，浏览器会合并渲染，依然没过渡 - 即使加了
transition-delay，只要display参与了状态切换，起始帧就丢失
用 visibility + opacity 替代 display 的实操要点
这是最轻量、兼容性最好（IE9+）、语义最清晰的方案。关键不是“只换一个属性”，而是两个属性必须协同控制，并显式声明过渡。
-
visibility: hidden保持盒模型占位，不影响布局流，且支持transition（但必须写进声明里！） - 过渡声明要包含两者：
transition: opacity 0.25s ease, visibility 0.25s ease；只写opacity，visibility仍会瞬切 - 初始隐藏态推荐这样写：
.el { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } - 显示时不要只改
opacity，要同步设visibility: visible，否则元素不可点、不可聚焦
必须用 display？那就靠 JS 强制触发布局
当第三方组件或遗留代码强制依赖 display 控制显隐，又不能改样式时，只能用 JS 打断浏览器的批量渲染优化。
- 核心动作三步：设
display: block→ 读一个 layout 触发属性（如el.offsetHeight）→ 再加动画类或设transform/opacity - 示例：
el.style.display = 'block';<br>el.offsetHeight; // 强制重排，让浏览器“看到”起始状态<br>el.classList.add('slide-in'); - 这个
offsetHeight读取不能省，也不能换成getComputedStyle—— 后者不一定触发 layout - 慎用于高频操作（如滚动中反复显示），会引发强制同步重排，造成卡顿
真正容易被忽略的是：过渡是否需要释放 DOM 占位。如果只是视觉隐藏，visibility + opacity 足够；但如果元素内容庞大（比如整页弹窗、富文本编辑器），动画结束后还得在 transitionend 里补一句 el.style.display = 'none' 来卸载，否则内存和事件监听器还在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
