twitter-bootstrap 在 bootstrap 4 中自定义折叠过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47738975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customizing the collapse transition in bootstrap 4
提问by TiPE
Bootstrap 4 uses the class .collapsingto animate the width/height of an .collapse-element while opening/closing it. Unfortunately the actual change is approached by adding the width/height as an inline style to the element and adding and removing the class at the start and end of the transition. Therefore it's quite hard to customize the transition (e.g. change timing or fade in/out instead of width transition).
Bootstrap 4 使用该类.collapsing在打开/关闭它时为 .collapse-element 的宽度/高度设置动画。不幸的是，实际的变化是通过将宽度/高度作为内联样式添加到元素并在过渡的开始和结束处添加和删除类来实现的。因此很难自定义过渡（例如更改时间或淡入/淡出而不是宽度过渡）。
What I've tried so far:
到目前为止我尝试过的：
- Adding the css property
transition:noneto the.collapsingclass: This does help get rid of the transition but opening/closing is still delayed by the transition time, since the class still gets added for a few millis before the actual change takes place. - Adding custom css keyframes to the
.collapsingclass: Since the same class is used for opening and closing, the same animation is shown for both.
- 将 css 属性添加
transition:none到.collapsing类：这确实有助于摆脱过渡，但打开/关闭仍会因过渡时间而延迟，因为在实际更改发生之前，类仍会被添加几毫秒。 - 向
.collapsing类中添加自定义 css 关键帧：由于打开和关闭使用相同的类，因此两者显示相同的动画。
Is there any way to change the transition e.g. to fade in/out (change of opacity) or do I have to build a custom version of the bootstrap.js?
有什么方法可以改变过渡，例如淡入/淡出（改变不透明度）还是我必须构建一个自定义版本的 bootstrap.js？
回答by Luca Perico
Take a look at this example:
看看这个例子：
.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>回答by Drew
If your using SASS to compile bootstrap.css then change the time specified for the $transition-collapsevariable in the _variables.scssfile.
如果您使用 SASS 编译 bootstrap.css，则更改为文件中的$transition-collapse变量指定的时间_variables.scss。
Default setting, for Bootstrap v4.2.1, is on line 254:
Bootstrap v4.2.1 的默认设置在第 254 行：
$transition-collapse: height .35s ease !default;
I changed .35s to .15s but you can set yours to something your happier with.
我将 0.35s 更改为 0.15s，但您可以将其设置为您更满意的值。
