display不能加transition，因其是非连续属性，浏览器无法在none和block间插值；应改用visibility+opacity组合或max-height过渡，并注意框架中DOM卸载时机与动画同步。
为什么display不能加transition
因为display是非连续CSS属性，浏览器无法在none和block（或其它值）之间插值计算中间状态。哪怕你写了transition: display 0.3s，它也完全不生效——不是慢，是压根没动。
用visibility + opacity替代display
这是最常用、兼容性好、逻辑清晰的方案：先让元素视觉上“淡出”，再真正隐藏；反向操作时先显示再淡入。关键在于控制渲染流程和交互响应。
-
visibility: hidden保留布局空间，但不可见、不可交互 -
opacity: 0影响透明度，可配合transition实现渐变 - 过渡结束后再切换
display（比如在transitionend事件里），避免占位空白期过长 - 如果元素内有
input或button，记得在visibility: hidden时同步设pointer-events: none，否则可能误点
用max-height做高度收放过渡（适合下拉菜单/折叠面板）
当需要隐藏/显示的是有高度变化的内容（比如展开详情、导航子菜单），max-height比height更安全——因为height: 0无法过渡到具体像素值，但max-height可以设一个“足够大但不过分”的上限值来模拟。
- 设
max-height: 0+overflow: hidden实现收起 - 展开时设
max-height: 500px（需预估内容最大高度，太小会截断，太大动画拖沓） - 不推荐用
height: auto过渡——CSS无法对auto做插值，会直接跳变 - 如果内容高度差异极大，建议结合JS读取
scrollHeight动态设max-height，再用transitionend回调清理内联样式
React/Vue中要注意的生命周期时机
框架常在状态更新后立刻移除DOM节点，导致CSS过渡来不及触发。必须把“开始过渡”和“真正卸载”拆成两步。
- React：用
useState控制可见性，配合useEffect监听变化，在状态变为false时先加退出class，等transitionend后再调setState彻底卸载 - Vue：用
enter-active-class/leave-active-class，并确保对应class里包含transition声明 - 别在
display: none生效前就删掉元素——过渡动画依赖元素仍在DOM中
最易被忽略的一点：过渡时间必须和JS里的延迟/事件监听严格对齐。差几十毫秒，就可能看到闪一下或者卡住不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
