Navbar折叠菜单动画由max-height过渡控制，需覆盖.navbar-collapse的transition声明为none!important，并同步检查max-height值、overflow设置及JS实例健康状态。
Navbar折叠菜单的动画由max-height过渡控制
Bootstrap 5 的 .navbar-collapse 展开/收起动画不是靠 JavaScript 控制帧，而是纯 CSS 的 max-height + transition。你看到的“缓慢展开”或“收起延迟”，根源都在这条规则里：.navbar-collapse:not(.show) { max-height: 0; } 和 .navbar-collapse.show { max-height: 120vh; } 的过渡过程。
- 删掉
transition声明即可彻底去掉动画：在自定义 CSS 中覆盖.navbar-collapse的过渡属性，写成transition: none !important; - 别只改
max-height而忽略其他干扰项——如果.navbar-collapse有padding、border或子元素用了position: absolute，浏览器仍会尝试插值，导致视觉卡顿，即使你设了transition: none，也可能因重排延迟造成“伪动画感” - 确保没在媒体查询里重复定义
transition，Bootstrap 5.3+ 把过渡逻辑封装进 CSS 变量--bs-navbar-collapse-transition，直接覆盖类选择器更可靠
为什么加了 transition: none 还有延迟？
常见错因是误判触发点：动画“延迟”往往不是过渡本身慢，而是 .show 类添加后，内容高度还没稳定就进入了过渡周期。比如下拉菜单（.dropdown-menu）首次渲染时字体未加载完，导致 max-height 估算偏小，浏览器先拉到错误高度再重算，看起来像卡住。
- 用
transition: none后仍卡顿？先临时加font-display: swap到导航栏用的字体声明中，排除字体加载干扰 - 检查是否对
.navbar-collapse设置了overflow: hidden——它会裁剪内部撑高的.dropdown-menu，使最终高度不可见，浏览器无法正确结束过渡 - 若用了自定义图标（如 SVG sprite），确认
background-image已加载；否则空白区域高度为 0，也会误导max-height插值
去掉动画后，点击-toggler 没反应？
这不是动画问题，而是状态同步断裂。Bootstrap 的 JS 在切换 .show 类时，会同时更新 aria-expanded 和处理事件委托。如果你用 CSS 强制让 .navbar-collapse 始终 display: block（比如为了禁用折叠），但没移除 data-bs-toggle="collapse"，JS 仍会尝试控制一个已被 CSS 锁死的元素，导致后续点击失效。
- 真要完全禁用折叠逻辑：删掉
data-bs-toggle="collapse"和data-bs-target，并移除.navbar-toggler按钮（或至少display: none） - 仅去动画、保留折叠功能：确保 JS 实例正常初始化，可通过
console.log(bootstrap.Collapse.getInstance(document.querySelector('.navbar-collapse')))验证 - SPA 场景下页面跳转后 collapse 状态丢失？不是动画问题，是新页面没重新初始化 Collapse 实例，需在路由就绪后手动调用
new bootstrap.Collapse(...)
transition，最好连带检查 max-height 值是否合理、overflow 是否被截断、以及 JS 实例是否还健康。 
