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

由于Bootstrap4使用了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;
}

演示：http://www.codeply.com/go/4Un0Q8CvkQ

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

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

演示：https://www.codeply.com/go/IHUZcvNjPS

Answer 2

我使用Bootstrap提供的列大小更改了列大小。例如，将col-2转换为col-1，然后我将转换调整为仅针对特定类型

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

Answer 3

我一直在做这个实验。谢谢你们的回答，伙计们！你可以试试这个。

.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);
}