Bootstrap 4 动画列宽变化

我有两列这样的：

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

我通过 Angular 将类名切换为col-8 offset-2 and col-0 . col-0 is width:0;margin:0;padding:0.

我想知道如何对列的宽度和位置进行动画处理。

由于 Bootstrap 4 使用 Flexbox，CSS 过渡动画不起作用，除非您使用设置数字flex-grow or flex-shrink在列上。

.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 http://www.codeply.com/go/4Un0Q8CvkQ

要在网格列更改媒体查询断点时对网格列进行动画处理（而不是通过 jQuery 切换类），您只需在网格列上使用 CSS 过渡即可。

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

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