bootstrap 4 animate column width change

Question

I have two columns like this:

<div class="container">
    <div class="row">
        <div class="col-9"></div>
        <div class="col-3"></div>
    </div>
</div>

I am switching the classnames via angular to be col-8 offset-2 and col-0 . col-0 is width:0;margin:0;padding:0 .

I am wondering how to animate both the width, and the positions of columns.

Answer 1

Since Bootstrap 4 uses flexbox, CSS transition animations don't work unless you use set a numeric flex-grow or flex-shrink on the columns.

.col-8 {
  flex-grow: 1;
  transition: all 400ms ease;
}

.col-0 {
  width: 0; 
  flex-shrink: 1;
  transition: all 400ms ease;
}

Demo: http://www.codeply.com/go/4Un0Q8CvkQ

---

To animate the grid columns as they change the media query breakpoints (instead of toggle classes via jQuery), you can simply use a CSS transition on the grid columns.

.row [class*='col-'] {
    transition: all 0.5s ease-in-out;
}

Demo: https://www.codeply.com/go/IHUZcvNjPS

Answer 2

I changed the colmn size by using column sizes provided by Bootstrap. For example col-2 to col-1 Then I adjusted the transition to only target the specific type

.row [class*='col-'] {
    transition: flex 0.5s ease-in-out, max-width .5s ease-in-out;
}

Answer 3

I've been experimenting with this. Try this out.

.container {
    /*transition: flex 0.5s ease-in-out, max-width 0.5s ease-in-out;
    */
    transition: flex 0.75s cubic-bezier(0.23, 1, 0.32, 1),
        max-width 0.75s cubic-bezier(0.23, 1, 0.32, 1);
}