Bootstrap 4 使用该类.collapsing在打开/关闭 .collapse-element 时对它的宽度/高度进行动画处理。不幸的是，实际的更改是通过将宽度/高度作为内联样式添加到元素并在过渡的开始和结束处添加和删除类来实现的。因此，自定义过渡非常困难（例如更改时间或淡入/淡出而不是宽度过渡）。
到目前为止我尝试过的：
- 添加 css 属性
transition:none to the .collapsing类：这确实有助于摆脱转换，但打开/关闭仍然会被转换时间延迟，因为在实际更改发生之前，类仍然会添加几毫秒。
- 添加自定义 css 关键帧到
.collapsingclass：由于打开和关闭使用相同的类，因此两者显示相同的动画。
有什么办法可以改变过渡，例如淡入/淡出（改变不透明度）还是我必须构建 bootstrap.js 的自定义版本？
看一下这个例子：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
