禁用Bootstrap折叠打开/关闭动画

Question

禁用折叠组的打开/关闭动画的任何技巧？

Answer 1

对于Bootstrap 3 和 4

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

Answer 2

Bootstrap 2 CSS解决方案：

.collapse {  transition: height 0.01s; }  

NB ：设置transition: none会停用折叠功能。

---

Bootstrap 4解决方案：

.collapsing {
  transition: none !important;
}

Answer 3

如果您在扩展之前发现 1px 跳转，而在使用CSS解决方案时折叠之后有点烦人，这里有一个简单的 JavaScript 解决方案 Bootstrap 3 ...

只需在代码中的某处添加：

$(document).ready(
    $('.collapse').on('show.bs.collapse hide.bs.collapse', function(e) {
        e.preventDefault();
    });
    $('[data-toggle="collapse"]').on('click', function(e) {
        e.preventDefault();
        $($(this).data('target')).toggleClass('in');
    });
);

Answer 4

也许不能直接回答这个问题，但最近添加official documentation描述了如何使用jQuery来完全禁用转换完全：

$.support.transition = false

将.collapsing CSS过渡设置为无as mentioned in the accepted answer删除了动画。但是 - 对我而言，在Firefox和Chromium中 - 会在导航栏崩溃时产生不必要的视觉问题。

例如，访问Bootstrap navbar example并从接受的答案中添加CSS：

.collapsing {
     -webkit-transition: none;
     transition: none;
}

我目前看到的是当导航栏折叠时，导航栏的下边框暂时变为两个像素而不是一个像素，然后令人不安地跳回到一个像素。使用jQuery，这个工件不会出现。