bootstrap 4 动画列宽变化 [英] bootstrap 4 animate column width change

问题描述

我有两列这样的:

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

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

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

解决方案

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

.col-8 {弹性增长:1；过渡:所有 400 毫秒缓动；}.col-0 {宽度:0；弹性收缩:1；过渡:所有 400 毫秒缓动；}

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

---

要在网格列更改媒体查询断点时为其设置动画(而不是通过 jQuery 切换类)，您只需在网格列上使用 CSS 过渡即可.

.row [class*='col-'] {过渡:所有 0.5 秒的缓入缓出；}

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

I have two columns like this:

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

I am switching the classnames via angular to be col-8 offset-2 and col-0 . col-0 is width:0;margin:0;padding:0.

I am wondering how to animate both the width, and the positions of columns.

解决方案

Since Bootstrap 4 uses flexbox, CSS transition animations don't work unless you use set a numeric flex-grow or flex-shrink on the columns.

.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

---

To animate the grid columns as they change the media query breakpoints (instead of toggle classes via jQuery), you can simply use a CSS transition on the grid columns.

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

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

这篇关于bootstrap 4 动画列宽变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！