直接删掉 .fade 类是最有效方式：bootstrap 5 导航栏折叠菜单动画完全依赖 .navbar-collapse 是否含 fade 类；移除后即无过渡，无需改 js 或 css。
直接删掉 .fade 类是最有效方式
Bootstrap 5 的导航栏折叠菜单动画完全依赖 .navbar-collapse 元素是否含有 fade 类。只要这个类不存在，JS 调用 show() 或点击按钮时，菜单就是立即展开/收起，没有 opacity 或 transform 过渡。不需要改 JS、不需覆盖 CSS、也不用监听事件——HTML 层面移除即可。
常见错误是只在 JS 里设 data-bs-animation="false" 或试图用 transition: none !important 覆盖，这些都无效，因为 Bootstrap 没提供这类 data 属性，且 CSS 覆盖容易漏掉 .navbar-collapse.show 下的 transform 和 opacity 规则。
检查并清理 HTML 中的 fade 类
打开你的导航栏 HTML，定位到 <div class="navbar-collapse"> 这一行，确认里面没有 <code>fade。例如：
<!-- ❌ 错误：带 fade -->
<div class="navbar-collapse collapse fade">
<p><!-- ✅ 正确：无 fade -->
</p>
<div class="navbar-collapse collapse">
<p>如果你用的是 React、Vue 等框架，注意组件库（如 React-Bootstrap）可能默认注入 <code>fade</code>。这时要显式传入 <code>fade={false}</code> 或检查其文档是否支持禁用该类。</p>
<p>另外，别忽略自定义构建的 Bootstrap CSS：如果用了 SCSS 并手动 <code>@import</code>，确保没引入 <code>scss/mixins/_transitions.scss</code> 或相关动画模块——但更简单的方式仍是 HTML 层控制，CSS 层无需动。</p>
<h3>为什么其他“禁用方法”容易失效</h3>
<p>以下操作看似合理，但实际不可靠：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>只加 <code>style="transition: none"</code>：它会覆盖 <code>opacity</code> 和 <code>max-height</code>，但 <code>.navbar-collapse.show</code> 的 <code>transform</code> 仍可能触发重绘抖动</li>
<li>覆盖 <code>.navbar-collapse { transition: none !important }</code>：破坏了 Bootstrap 内部对 <code>max-height</code> 的过渡控制逻辑，可能导致收起后高度残留或内容错位</li>
<li>用 JS 移除 <code>show</code> 类再加回来：这反而会意外触发一次过渡，尤其在快速点击时</li>
</ul>
<p>真正干净的做法，就是让 DOM 初始就不带 <code>fade</code>，后续所有行为都自然无动画。</p>
<h3>响应式下还要注意 <code>max-height</code> 的干扰</h3>
<p>即使去掉了 <code>fade</code>，如果折叠菜单展开时仍有“卡顿感”，问题往往出在 <code>max-height</code> 过渡上——这是 Bootstrap 5.3+ 引入的独立动画机制，和 <code>fade</code> 无关，但它依然存在。</p>
<p>解决方式很简单：在 CSS 中强制关闭它的过渡：</p>
<pre class="brush:php;toolbar:false;">.navbar-collapse {
transition: none !important;
}
.navbar-collapse.show {
transition: none !important;
}
注意：这条规则必须写在 Bootstrap CSS 之后，且不能只写 transition-property: none，要写完整的 transition 值。否则部分浏览器（尤其是旧版 Safari）仍会尝试插值 max-height，导致视觉跳变。
最容易被忽略的是：禁用动画不是单点操作。它涉及 HTML 类名、CSS 过渡属性、以及 Bootstrap 版本对 max-height 的隐式处理。三者缺一，就可能在某个设备或交互路径下漏出一帧动画。
