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?

Bunco

Just in case somebody else has the same issue: What I did in the end was to bite the bullet and compile my own version of the bootstrap.js. In this way I could directly edit the collapse.js and make I do what I wanted. – Bunco

see github.com/twbs/bootstrap/issues/28300#issuecomment-464802711 – Solomonsolon

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>

Burly

In bootstrap 4, .collapse already defaults to not being visible (unless you add the .show class). FYI – Residentiary

An issue in Chrome and Bootstrap 4 was that <div> collapses were happening abruptly instead of being animated. Overriding .collapsing as above solved it. – Elysian

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.

Wadlinger

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

Obviate

Answer 4

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

Podium

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Darindaring

Answer 5

To get a fade effect instead of the height change effect, I ended up using the following code that seems to work pretty well. Assigning the transition to both .collapse and .collapsing made it a smoother transition. There is still a very slight delay at the start of the transition, though, but it's not really that noticeable.

  .collapse,
  .collapsing {
    opacity: 0;
    overflow: hidden;
    height: 0;
    transition: opacity 0.35s ease;
  }

  .collapse.show {
    opacity: 1;
    height: auto;
  }

Note: Sharing this here, even though this is an older post, because this post comes up first when searching for ways to change Bootstrap's Collapse effect to a fade.

Amoroso