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。

我想知道如何同时动画调整列的宽度和位置。

- userqwert

---

你目前尝试过什么了吗？ - Carol Skelly

我已经尝试了Angular内置的动画系统，但不起作用，因为我的div包含一个路由器出口。我还尝试过样式，但是我无法弄清楚如何使宽度和位置平滑地转换而不会换行。我也尝试过自动宽度列，但似乎也不起作用。 - userqwert

https://dev59.com/SWcs5IYBdhLWcg3w3HoG - Arjan Knol

我会在解决它之后。 - userqwert

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

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

---

为了使网格列在媒体查询断点更改时具有动画效果（而不是通过jQuery切换类），您可以在网格列上简单地使用CSS过渡。

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

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

- Zim

---

CSS过渡动画真的很糟糕。找到它们真正起作用的情况是罕见的。 - Vahid Amiri

有时候他们会进行测试，但完全排除他们是愚蠢的。 - Mooseman

Answer 2

我使用 Bootstrap 提供的列大小来更改列的大小。例如，从 col-2 更改为 col-1。然后我调整了过渡效果，仅针对特定类型进行目标调整。

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

- Andres Abello

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

- emre-ozgun