禁用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; }  

注意:设置transition: none禁用崩溃功能.

Bootstrap 4 解:

.collapsing {
  transition: none !important;
}

Answer 3

如果你在扩展之前发现1px跳转并且在使用CSS解决方案时崩溃之后有点烦人,这里是一个简单的Bootstrap 3 JavaScript解决方案......

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

$(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

也许不是这个问题的直接答案,但最近官方文档中的一个新增内容描述了如何使用jQuery 完全禁用转换:

$.support.transition = false

如接受的答案中所述,将.collapsingCSS过渡设置为无,从而删除了动画.但是 - 对我来说,这在Firefox和Chromium中 - 会在导航栏崩溃时产生不必要的视觉问题.

例如,访问Bootstrap 导航栏示例并从接受的答案中添加CSS:

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

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