bootstrap 4动画列宽变化

Question

我有两个这样的列:

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

我通过angular切换类名是 col-8 offset-2和col-0.col-0是width:0;margin:0;padding:0.

我想知道如何动画宽度和列的位置.

Answer 1

由于Bootstrap 4使用flexbox,因此除非您使用设置数字flex-grow或flex-shrink列,否则CSS过渡动画不起作用.

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

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