Collapse transition setup in bootstrap 4

Question

Bootstrap 4 uses the class .collapsingto animate the width / height of the .collapse element when it opens / closes. Unfortunately, the real changes are added by adding a width / height as an inline style to the element and adding and removing a class at the beginning and end of the transition. Therefore, it’s quite difficult to set up a transition (for example, change the time or fade in / out instead of a width transition).

What I have tried so far:

• Adding the css property transition:noneto the class .collapsing: this helps to get rid of the transition, but opening / closing is still delayed by the transition time, since the class is still added a few milliseconds before the actual change occurs.
• Adding custom CSS keyframes to the class .collapsing: since the same class is used to open and close, the same animation is displayed for both.

Is there a way to change the transition, for example. fade in / out (change opacity) or do I need to create a custom version of bootstrap.js?

Answer 1

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>

Run codeHide result

Answer 2

If you use SASS to compile bootstrap.css, change the time specified for the variable $transition-collapsein the file _variables.scss.

The default setting for Bootstrap v4.2.1 is on line 254:

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

I changed .35s to .15s, but you can set something happier.