不能用 display: none 做过渡，因其为离散属性无中间状态；可靠方案是 max-height + overflow: hidden 或 transform + opacity，需设固定 max-height 值并避免 height: auto。
不能用 display: none 做过渡，这是最常踩的坑——它根本不会动，只会闪。
为什么 display 切换无法触发 transition
display 是离散属性，浏览器没有中间状态可插值。哪怕你写了 transition: all 0.3s，只要涉及 display: none ↔ block，动画就直接跳过。常见现象是：菜单点开“啪”一下弹出，收起时瞬间消失，或者加了 transition 却完全没反应。
- 可动画的 CSS 属性极少，真正靠谱的只有：
opacity、transform、max-height（需配合overflow: hidden）、visibility（但必须和opacity或transform配合，单独用会立即生效） -
height: 0 → height: auto同样无效，因为auto无法参与过渡计算 - 移动端尤其要注意：
:hover在触摸设备上不可靠，纯 CSS 悬停菜单建议补:focus-within或改用 JS 控制
max-height + overflow: hidden 是最稳的下拉方案
这个组合能真实推挤下方内容，保持文档流，兼容性好，且不依赖 JS 就能工作。
- 初始状态设
max-height: 0、overflow: hidden、opacity: 0 - 展开时设一个**固定值**，比如
max-height: 250px（不能是auto或fit-content） -
max-height值要略大于菜单最大可能高度：6 个选项 + padding ≈ 220px，那就设 250px；设太小会截断，设太大（如 1000px）会让收起动画明显拖沓 - 必须配
overflow: hidden，否则超出部分会漏出来 - 别混用
visibility: hidden——它一设就立刻隐藏，动画会断掉
JS 控制 class 切换时的重排陷阱
用 JS 添加 .show 类后，如果立刻读取 offsetHeight 或操作 DOM，大概率拿到的是旧值，因为浏览器还没重排（reflow）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 常见表现：菜单闪一下才展开，或高度算出来是 0
- 简单修复：在读取前加一句
el.offsetHeight，强制触发重排 - 更稳妥做法：用
requestAnimationFrame把后续逻辑延迟到下一帧执行 - 监听事件优先用
click，避免touchstart和click冲突；若用<details>，监听toggle事件更可靠（支持键盘操作）
transform + opacity 适合悬浮/模态类菜单
当菜单用 position: absolute 浮在上方、不推挤内容时，这个组合比 max-height 更轻量、更顺滑。
- 默认状态：设
opacity: 0、transform: translateY(-10px)、visibility: hidden - 展开状态：
opacity: 1、transform: translateY(0)、visibility: visible -
visibility必须配opacity或transform，否则不会过渡 - SVG 图标旋转卡顿？加
will-change: transform，必要时补transform: translateZ(0)触发硬件加速 - 图标旋转方向反了？确认用的是
rotate(180deg)，不是rotateX(180deg)（后者会让元素翻到背面看不见）
关键点始终是：别碰 display 和 height: auto，选对可动画属性，再控制好过渡时机和数值精度——尤其是 max-height 的上限值，它决定了动画是否自然，也最容易被忽略。
