应修改 .navbar-collapse.show 的 transition 属性，如 .navbar-collapse.show { transition: max-height 0.6s ease-in-out !important; }，并同步增大 max-height 值（如 120vh 或 480px），避免因动画变慢导致内容被截断或卡顿。
怎么改 .navbar-collapse.show 的 transition-duration
navbar 移动端菜单的“展开动画速度”由 .navbar-collapse.show 的 max-height 过渡时长控制，不是靠 javascript 或 data-bs-* 属性。bootstrap 默认用的是 max-height 0.35s ease-in（5.3+ 版本），但这个值写在 css 变量 --bs-navbar-collapse-transition 里，直接覆盖更可靠。
实操建议：
- 在自定义 CSS 中（必须放在 Bootstrap CSS 之后）添加：
.navbar-collapse.show { transition: max-height 0.6s ease-in-out !important; } - 别只改
.navbar-collapse基础态——它收起时是max-height: 0，动画生效全靠.show类，所以必须锁定这个选择器 - 过渡函数推荐
ease-in-out，比默认的ease-in更平滑；避免用linear，移动端手感生硬 - 如果设成
1.2s以上，需同步检查max-height值是否足够（见下一条），否则动画中途就被overflow: hidden截断
为什么调慢了动画反而内容被截断
改慢动画后菜单只显示前两行、底部空白——这不是动画出错，而是 max-height 的终点值没跟着变大。动画越慢，浏览器越严格按设定的 max-height 渲染高度；而 Bootstrap 默认的终点值（如 300px 或 1000px）是固定估算的，不随动画时长动态调整。
解决办法：
- 必须同步增大
.navbar-collapse.show的max-height，例如：.navbar-collapse.show { max-height: 120vh !important; transition: max-height 0.6s ease-in-out !important; } - 不能写
max-height: none——none不参与 CSS transition，动画会立即跳到展开态 - 避免用
100%或fit-content—— 它们无法作为 transition 的合法终点值，浏览器会退回到初始max-height: 0，导致动画失效 - 如果菜单项极少（比如就 4 个
.nav-link），可精确估算：每项约48px高 +1rem余量，写成max-height: 280px更轻量
dropdown 菜单让动画卡顿或错位怎么办
折叠菜单里含 .dropdown 时，点开二级菜单常出现“先展开、再突然撑高”或“动画中途跳一下”，根源是 .dropdown-menu 默认 position: absolute，不占 .navbar-collapse 高度，但它的父容器（如 .nav-item）有 padding 或 min-height，导致实际内容高度 > max-height 终点值。
实操建议：
- 给展开态加静态定位：
.navbar-collapse.show .dropdown-menu { position: static !important; }让它随文档流撑高容器，max-height动画才能覆盖真实高度 - 或者改用
data-bs-popper="static"属性禁用 Popper.js 定位：<ul class="dropdown-menu" data-bs-popper="static">
- 检查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }—— 移动端折叠态不需要这个，会干扰高度计算 - 删掉
.nav-item上的min-height，改用padding-block控制间距，更可控
动画变慢后低端机卡顿怎么优化
把动画从 0.35s 改成 0.8s 后，在旧安卓机或低端 iOS 设备上出现掉帧甚至“一顿一顿”，往往不是因为时间设太长，而是 max-height 过大触发频繁重排（reflow）。
关键点：
-
max-height: 120vh在小屏设备上可能算出超大像素值（比如 2000px+），浏览器要反复测量内容高度，性能开销陡增 - 优先用像素值替代
vh：如果菜单最多 8 项，按48px × 8 + 4rem ≈ 480px，写成max-height: 480px更稳 - 确保
.navbar-collapse没设border或大padding—— 它们不参与max-height动画，但会挤占可用空间，导致内容“突然弹出”而非平滑过渡 - 别在动画过程中动态修改子元素的
display或height—— 这会强制中断当前 transition，触发重排
改动画速度这件事，真正难的不是调数字，而是让 max-height 的终点值、transition 时长、子元素定位三者对齐。漏掉任意一环，慢下来的效果就变成卡顿或截断。
