禁用 Bootstrap 的折叠打开/关闭动画 [重复]答案

【问题标题】：disable Bootstrap's Collapse open/close animation [duplicate]禁用 Bootstrap 的折叠打开/关闭动画 [重复]
【发布时间】：2023-04-03 11:09:01
【问题描述】：

有什么技巧可以禁用折叠组的打开/关闭动画？

【问题讨论】：

标签： javascript animation twitter-bootstrap

【解决方案1】：

对于 Bootstrap 3 和 4 它是

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

【讨论】：

可以确认，这适用于引导程序 3。我最终禁用了转换，因为它在移动设备上相当慢。不知道为什么。
在移动设备上仍然有一个小的延迟，因为 bootstrap.js 中的这条线：“Collapse.TRANSITION_DURATION = 350”更改过渡持续时间值并且延迟将被修复。
-moz-transition 和 -o-transition 怎么样？
我添加了display: none 以避免最后一个崩溃的人工制品。
虽然这会禁用动画，但根据 OP 的要求，它会保持打开延迟。是否可以将延迟减少到 0？

【解决方案2】：

`Bootstrap 2`CSS解决方案：

.collapse {  transition: height 0.01s; }

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

`Bootstrap 4`解决方案：

.collapsing {
  transition: none !important;
}

【讨论】：

【解决方案3】：

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

【讨论】：

对我来说，问题不仅在于 CSS 过渡本身，还在于改变高度的 javascript。移动端缺乏整体体验，使用上面的 JS 代码解决了我的问题。
这也解决了我的问题，但是如果您在外部点击，它会阻止导航栏关闭，（我有一个点击事件）..
很棒的解决方案！这导致完全平滑的过渡。完全没有闪烁。
最佳解决方案然而，CSS 在我的情况下不起作用。

【解决方案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，这个神器不会出现。

【讨论】：

一个缺点是这会全局禁用转换，这可能是不希望的。
在加载 bootstrap.min.js 后纯 $.support.transition = false 是不够的，但 $(function() { $.support.transition = false; }) 对我有用。

Bootstrap 2CSS解决方案：

Bootstrap 4解决方案：

`Bootstrap 2`CSS解决方案：

`Bootstrap 4`解决方案：