display: none 无法实现过渡动画，因其为离散属性无中间状态；应改用 max-height（推挤式）或 transform+opacity（悬浮式）等可插值属性。
直接用 display: none 切换下拉菜单，不可能有过渡动画——这是根本限制，不是写法问题。
为什么 display: none 无法过渡
display 是离散属性，没有中间状态：none → block 是瞬时切换，浏览器不计算“半显示”状态，transition 完全失效。几乎所有初学者卡在这一步。
- 哪怕写了
transition: display 0.3s，也完全不起作用 - 控制台不会报错，但动画就是不出现——容易误以为是 CSS 优先级或缓存问题
- 替代方案必须使用可插值的属性：比如
max-height、opacity、transform、visibility（仅配合其他属性）
用 max-height 实现推挤式平滑展开
适合需要“推动下方内容一起移动”的场景（如 FAQ 折叠面板、表单分组），核心是让下拉区域始终参与文档流。
-
max-height必须设为固定数值（如250px），不能用fit-content或auto；否则过渡跳变或直接失效 - 初始状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 250px; /* 略大于最大内容高度 */ - 搭配
transition: max-height 0.3s ease, opacity 0.3s ease，再加opacity避免文字在收缩末期模糊抖动 - 注意：如果内容高度动态变化（如含图片加载后撑开），需 JS 重设
max-height，否则会截断或留白
用 transform + opacity 实现悬浮式淡入滑下
适合导航栏下拉菜单（不推挤页面其他元素），视觉更轻量，兼容性好，且避免布局重排抖动。
- 初始状态：
opacity: 0; transform: translateY(-10px); visibility: hidden; - 展开状态：
opacity: 1; transform: translateY(0); visibility: visible; -
visibility: hidden不可过渡，但它能防止鼠标穿透（即“幽灵点击”），必须和opacity+transform同步开关 - 不要用
height过渡——它会强制重排，且无法设height: auto动画 - 若菜单内有
position: absolute子项，确保父容器有position: relative，否则定位偏移
真正难的不是写几行 CSS，而是判断该用哪种模式：推挤式（max-height）还是悬浮式（transform）。选错会导致下方内容跳动、菜单错位、或动画卡顿——这些现象背后几乎都是属性选择不当，而不是代码漏了分号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
