bootstrap 4 动画列宽变化答案

【问题标题】：bootstrap 4 animate column width changebootstrap 4 动画列宽变化
【发布时间】：2017-08-16 05:27:25
【问题描述】：

我有两列这样的：

<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。

我想知道如何为列的宽度和位置设置动画。

【问题讨论】：

到目前为止你有没有尝试过？
我已经尝试过 Angular 的内置动画系统，因为我的 div 包含一个路由器插座，所以它不起作用，我也尝试过样式，但我不知道如何在不包裹的情况下使宽度和位置平滑转换一条新线。我试过自动宽度列，但似乎也不起作用。
stackoverflow.com/questions/12520751/animate-bootstrap-columns
解决后我会的

标签： css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

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

.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

【讨论】：

CSS 过渡动画完全是垃圾。找到他们实际工作的情况很少见。
@VahidAmiri 他们有时会进行测试，但完全解雇他们是愚蠢的。

【解决方案2】：

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

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

【讨论】：

【解决方案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);
}

【讨论】：