Customizing the collapse transition in bootstrap 4

Question

Bootstrap 4 uses the class .collapsing to 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).

What I've tried so far:

• Adding the css property transition:none to the .collapsing class: 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 .collapsing class: Since the same class is used for opening and closing, the same animation is shown for both.

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?

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>

Answer 2

If your using SASS to compile bootstrap.css then change the time specified for the $transition-collapse variable in the _variables.scss file.

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 yours to something your happier with.

Answer 3

It's about the transition style. You can specify it in s for seconds or ms for milliseconds. I have, through experimentation, discovered that this is the minimum html required. Note that Bootstrap uses the id and data-target to associate the button with the section to collapse. So, if you have more than one set of collapsible sections, you'll need separate id's.

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

Additional information:

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