必须修改 .navbar-collapse.show 的 max-height 和 transition 属性才生效，如 max-height: 120vh !important; transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important，且需确保自定义 css 在 bootstrap css 之后加载。
直接改 .navbar-collapse.show 的 transition 才生效
Navbar 移动端菜单的展开/收起动画不是 JS 控制的，也不是靠 data-bs-toggle 属性调节速度——它纯由 CSS 的 max-height 过渡驱动。Bootstrap 5.3+ 虽然引入了 CSS 变量 --bs-navbar-collapse-transition，但这个变量只供内部引用，**你不能靠修改变量来覆盖动画**。
必须在自定义 CSS 中（且确保加载顺序在 Bootstrap CSS 之后）显式重写：
.navbar-collapse.show {
max-height: 120vh !important;
transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
-
!important不可省略，否则会被 Bootstrap 默认规则压制 - 别只写
transition-duration，它无法单独覆盖完整的transition声明 - 不要改
.navbar-collapse基础态，动画只在.show类存在时触发
为什么改慢了动画反而只显示前两行？
这不是代码写错了，而是 max-height 终点值没同步放大。动画越慢，浏览器越严格按你写的数值渲染高度；而 Bootstrap 默认的终点值（比如 300px）是固定估算的，不随时长变化。
- 绝对不能用
max-height: none—— 它不参与 transition，动画会立即跳到展开态 - 避免
max-height: 100%或fit-content—— 浏览器不支持这些值作为 transition 的合法终点，会退回到0 - 精简菜单（≤5 项）可用像素值：
max-height: 240px，更轻量，减少低端机重排卡顿 - 通用方案推荐：
max-height: 120vh，兼顾不同屏幕尺寸
下拉菜单（.dropdown）让动画“跳一下”怎么处理？
点开二级菜单时出现先展开、再突然撑高，或动画中途卡顿，根本原因是 .dropdown-menu 默认 position: absolute，不占 .navbar-collapse 高度，但它的父容器（如 .nav-item）若有 min-height 或大 padding，视觉上变高却没被 max-height 涵盖。
- 删掉
.nav-item的min-height，改用padding-block: 0.5rem控制间距 - 给
.navbar-collapse.show加padding-bottom: 1rem预留空间，而非依赖自动撑开 - 若需下拉菜单随文档流撑高：移动端可加
.dropdown-menu { position: static !important; } - 排查是否误写了
.dropdown-menu { top: 100% }—— 折叠态不需要这个定位
缓动函数选哪个？ease-in-out 还是 cubic-bezier？
默认的 ease 或 ease-in 在移动端容易显得生硬，“弹跳感”明显；linear 则手感太机械。
- 推荐用
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比ease-in-out更自然，尤其适合触控反馈 - 动画时长别设低于
0.2s（突兀）或高于0.8s（用户易感知延迟） - 别在
@media查询里覆盖max-height—— Bootstrap 5.3+ 的过渡逻辑已写死在类选择器中，直接覆盖类更可靠
真正容易被忽略的是：所有干扰盒模型的样式（比如 .navbar-collapse 上的 border、大 padding、overflow: hidden）都会破坏 max-height 插值，导致卡顿或跳变，不是调曲线就能解决的。
