javascript - 禁用 Bootstrap 的 Collapse 打开/关闭动画

Question

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

Answer 1

对于 Bootstrap 3和4，它是

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

Answer 2

Bootstrap 2CSS解决方案：

.collapse {  transition: height 0.01s; }  

注意：设置transition: none禁用折叠功能。

---

Bootstrap 4解决方案：

.collapsing {
  transition: none !important;
}

Answer 3

如果你在使用 CSS 解决方案时发现展开前和折叠后的1px跳跃有点烦人，这里有一个用于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

---

如已接受的答案中所述，.collapsing将CSS 过渡设置为无会删除动画。但这 - 在 Firefox 和 Chromium 中对我来说 - 在导航栏折叠时会产生不必要的视觉问题。

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

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

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