用 max-height + overflow 实现高度过渡更可靠：因 height: auto 无法动画，需用足够大的固定 max-height（如250px）配合 overflow: hidden 和 transition，避免 display 切换破坏动画，并注意滚动偏移与可访问性适配。
用 max-height + overflow 实现高度过渡
直接对 height 做 transition 不可靠——因为内容高度不确定时，height: auto 无法参与动画计算，浏览器会跳过过渡或回退到 height: 0 瞬切。正确做法是用 max-height 替代：max-height 是可动画的数值属性，只要设为一个「足够大但不过分夸张」的固定值（比如 250px），就能触发平滑缩放。
关键样式组合必须包含：
-
overflow: hidden—— 否则超出部分会漏出，破坏收起效果 -
transition: max-height 0.3s ease, opacity 0.3s ease—— 加上opacity可缓解文字“抽搐”感 - 展开状态用类名（如
.is-open）控制：max-height: 250px; opacity: 1
⚠️ 注意：max-height: 0 收起时，若内容内有 padding/margin，可能残留空白；建议子元素统一用 margin: 0 或用 padding-top/bottom 替代。
避免 display: none 破坏动画连贯性
很多初学者在 JS 里写 el.style.display = 'block' 再加 transition，结果动画不触发——因为 display 切换本身不可动画，且会强制浏览器跳过所有过渡中间帧。
立即学习“前端免费学习笔记（深入）”；
正确姿势是让元素始终在文档流中，只通过可动画属性控制显隐：
- 保持
display: block（或默认值），不改display - 用
max-height控制高度变化 - 用
opacity辅助视觉淡入/淡出 - 必要时加
visibility: hidden配合max-height: 0，但不要单独依赖它做动画
如果菜单需支持键盘导航或屏幕阅读器，还要确保 aria-expanded 和 aria-hidden 属性随状态同步更新，否则过渡再顺滑，可访问性也掉线。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
多级嵌套时如何防止滚动偏移
当多个 .submenu 共享同一个父容器（如 .navbar），且要求「单开模式」时，同时触发展开 A 和收起 B 的 max-height 过渡，会导致父容器高度剧烈抖动，浏览器自动调整 scrollTop，新展开项常被推到视口外。
解决核心不是禁用并发，而是把滚动时机卡死在新菜单过渡结束那一刻：
- 监听新展开项的
transitionend事件（注意：只监听max-height，避免opacity多次触发） - 在回调里计算：
submenuTitle.offsetTop - navbar.offsetTop + navbar.scrollTop - 立即执行
navbar.animate({ scrollTop: target }, 325)，时长与 CSS 中的transition严格一致 - 每次绑定前先
$submenu.off('transitionend')，防重复监听
这个细节很容易被忽略：不绑定到 transitionend，而用 setTimeout 模拟，时间稍有偏差就会看到“先展开、再猛地一跳”的割裂感。
jQuery animate 与原生 scrollIntoView 的取舍
有人倾向用 element.scrollIntoView({ behavior: 'smooth' }) 简化滚动逻辑，但它有两个硬伤：
- 滚动目标是相对于整个 viewport，不是父容器；若菜单在
position: fixed的侧边栏里，scrollIntoView会去滚 body，完全失效 - 无法控制滚动持续时间与过渡动画对齐，浏览器自定的 300–500ms 常和你的
0.3s不匹配
所以真实项目中，尤其涉及固定定位或自定义滚动容器时，必须手算偏移量 + animate（jQuery）或 element.scrollTo（原生带 behavior: 'smooth' + duration 的 polyfill）。
最易被绕过的点：忘了给父容器设 overflow-y: auto 或 overflow-y: scroll —— 没这句，scrollTop 就是只读的，所有滚动代码都静默失败。
