看看这个例子：

.collapse {
  visibility: hidden;
}
.collapse.show {
  visibility: visible;
  display: block;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

个字符

如果您使用SASS编译bootstrap.css，请更改_variables.scss文件中为$transition-collapse变量指定的时间。
Bootstrap v4.2.1的默认设置在第254行：

$transition-collapse: height .35s ease !default;

字符串
我把0.35改为0.15，但你可以把你的设置成你更喜欢的。

这是关于过渡样式的。你可以用s表示秒，用ms表示毫秒。我通过实验发现，这是所需的最小html。* 注意，Bootstrap使用id和data-target将按钮与要折叠的部分关联起来。所以，如果你有多个可折叠的部分，你需要单独的id。*

<button
  data-toggle="collapse"
  data-target="#collapseExample">button name</button>
...
<div style="transition: 1s;" id="collapseExample">
your collapsible stuff goes here.
</div>

字符串
其他信息：

• W3 School example and 'try it yourself' link
• Collapse example in general with Bootstrap的

$('#collapseExample').on('show.bs.collapse', function () {
    $(this).addClass('collapse-show');
})
$('#collapseExample').on('shown.bs.collapse', function () {
    $(this).removeClass('collapse-show');
})

字符串