如何移除Bootstrap 4 Collapse组件的过渡动画和延迟？

嘿，你已经搞定了CSS层面的过渡移除，但还是遇到延迟？这事儿我之前也碰过——光改.collapsing的CSS不够，Bootstrap的Collapse JS组件本身藏着时间逻辑呢，给你两个实用的解决思路：

方法1：补全CSS覆盖，堵死所有过渡可能 #

你现在的CSS已经生效了一部分，但可以再加几条来彻底切断过渡相关的样式：

/* 保留你已有的代码，再加下面的 */
.collapsing {
  -webkit-transition: none !important;
  transition: none !important;
  display: none !important;
  height: 0 !important;
}
.collapse.show {
  height: auto !important;
}

加!important是为了确保覆盖Bootstrap的默认样式，height: 0能强制.collapsing状态瞬间完成高度变化，不会留等待时间。

方法2：从JS层面直接禁用过渡时长 #

如果CSS还是没搞定，那就是Bootstrap的Collapse JS在控制状态切换时自带了定时器。你可以直接修改组件的默认过渡时长：

全局修改（所有Collapse组件生效） #

// 在页面加载完成后执行
$(document).ready(function() {
  $.fn.collapse.Constructor.Default.transitionDuration = 0;
});

单独针对你的navbar修改 #

// 只给#navbarSupportedContent这个元素设置
$(document).ready(function() {
  $('#navbarSupportedContent').collapse({
    transitionDuration: 0
  });
});

这样一来，JS就不会在切换状态时等待过渡完成，直接瞬间切换显示/隐藏状态，彻底消除延迟。

简单说下原因：Bootstrap的Collapse逻辑是先加.collapsing类触发过渡，等过渡结束后再切换到最终的.collapse.show或隐藏状态，哪怕CSS把过渡设为none，JS里的等待逻辑可能还在跑，所以直接把JS的过渡时长设为0就能从根源解决问题。

内容的提问来源于stack exchange，提问作者Cray