自定义 Bootstrap 4 中的折叠过渡

Question

Bootstrap 4 使用类

.collapsing

在打开/关闭 .collapse-element 时对它的宽度/高度进行动画处理。不幸的是，实际的更改是通过将宽度/高度作为内联样式添加到元素并在过渡的开始和结束时添加和删除类来实现的。因此，自定义过渡非常困难（例如更改时间或淡入/淡出而不是宽度过渡）。

到目前为止我尝试过的：

• 将 css 属性

  transition:none

  添加到

  .collapsing

  类：这确实有助于摆脱转换，但打开/关闭仍然会被转换时间延迟，因为在实际更改发生之前，该类仍然会添加几毫秒地点。
• 向

  .collapsing

  类添加自定义CSS关键帧：由于打开和关闭使用同一个类，因此两者显示相同的动画。

有什么方法可以改变过渡，例如淡入/淡出（改变不透明度）还是我必须构建 bootstrap.js 的自定义版本？

Answer 1

看一下这个例子：

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
                horizontal collapse
            </button>
            <div id="demo" class="collapse show width">
                <div style="width:400px;">
                    <p>Works smoother when element has defined width. Egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <button role="button" class=" btn btn-danger" data-toggle="collapse" data-target="#demo2">
                vertical collapse
            </button>
            <div id="demo2" class="collapse show">
                <div>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

如果您使用 SASS 编译 bootstrap.css，则更改为

$transition-collapse

文件中的

_variables.scss

变量指定的时间。

Bootstrap v4.2.1 的默认设置位于第 254 行：

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

我将 0.35 秒更改为 0.15 秒，但您可以将其设置为您更满意的值。

Answer 3

这是关于过渡风格的。您可以用 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 学校示例和“亲自尝试”链接
• Bootstrap 的一般折叠示例

Answer 4

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