bootstrap 4动画列宽变化 [英] bootstrap 4 animate column width change
问题描述
我有两列是这样的:
<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
.
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.
推荐答案
由于Bootstrap 4使用flexbox,除非在列上使用数字flex-grow
或flex-shrink
设置,否则CSS过渡动画将不起作用.
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;
}
演示: http://www.codeply.com/go/4Un0Q8CvkQ
要在网格列更改媒体查询断点时为其动画(而不是通过jQuery切换类),只需在网格列上使用CSS过渡即可.
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;
}
演示: https://www.codeply.com/go/IHUZcvNjPS
这篇关于bootstrap 4动画列宽变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!