display: none 无法过渡因其是离散属性，无中间状态；应改用 opacity + visibility 实现平滑隐藏，需配合 pointer-events: none；收缩高度时用 max-height 而非 height: auto，并注意 JS 触发时机避免动画失效。
display: none无法实现平滑隐藏——不是写法不对，是浏览器根本不会过渡它。
为什么 transition: display 完全无效
因为 display 是离散属性，没有中间状态。从 block 到 none 不是“逐渐消失”，而是“瞬间销毁渲染节点”。哪怕你写了 transition: display 0.3s，浏览器也压根不计算、不插值、不触发动画帧。
更关键的是：一旦 DOM 节点被设为 display: none，它立刻脱离布局树，后续所有依赖该节点的 CSS 动画（比如 opacity）都会被强制中止——你看到的不是“淡出一半就没了”，而是“直接闪退”。
用 opacity + visibility 替代 display
这是最轻量、兼容性最好、且保留定位上下文的方案：
-
opacity: 0控制视觉透明度，配合transition: opacity 0.3s实现淡出 -
visibility: hidden防止元素接收鼠标/键盘事件，同时不破坏文档流（对position: sticky、滚动锚点等至关重要） - 必须搭配
pointer-events: none，否则opacity: 0后仍可能被误点 - 切记：不要在同一个 class 切换里同时改
display和opacity，否则动画会被打断
需要收缩高度时，用 max-height 而不是 height: auto
如果目标是“折叠内容区域”，max-height 是唯一靠谱的选择：
-
max-height: 0+overflow: hidden可以收起内容，配合transition: max-height 0.4s ease - 不能用
height: auto—— 浏览器无法对auto做插值，过渡会失效或跳变 -
max-height必须设一个足够大的固定值（如500px），确保展开时内容不被截断 - 若内容高度差异大，可结合 JS 动态读取
scrollHeight并内联设置max-height，但要注意避免重排抖动
JS 切换时最容易踩的坑
动画失效往往不是 CSS 写错了，而是 JS 触发时机不对：
- 不要先设
element.style.display = 'none'再加类——这会立即销毁节点 - 正确做法：只操作 class，让 CSS 自动驱动过渡；例如
el.classList.add('hidden')，而.hidden里只含opacity、visibility等可过渡属性 - 如果需在动画结束后移除元素，监听
transitionend事件，而不是靠setTimeout估算时间 - 多个属性同时过渡（如
opacity+transform）时，确保它们都在同一 transition 声明里，否则可能不同步
真正麻烦的不是“怎么写动画”，而是“怎么避开那些让动画根本启动不了的隐性条件”——比如无意中触发了 display: none，或者在 transition 过程中修改了布局触发重排。这些细节不报错，但会让效果彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
