我有两列这样的:
<div class="container">
<div class="row">
<div class="col-9"></div>
<div class="col-3"></div>
</div>
</div>
我通过 Angular 将类名切换为col-8 offset-2
and col-0
. col-0
is width:0;margin:0;padding:0
.
我想知道如何对列的宽度和位置进行动画处理。
由于 Bootstrap 4 使用 Flexbox,CSS 过渡动画不起作用,除非您使用设置数字flex-grow
or flex-shrink
在列上。
.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 http://www.codeply.com/go/4Un0Q8CvkQ
要在网格列更改媒体查询断点时对网格列进行动画处理(而不是通过 jQuery 切换类),您只需在网格列上使用 CSS 过渡即可。
.row [class*='col-'] {
transition: all 0.5s ease-in-out;
}
Demo: https://www.codeply.com/go/IHUZcvNjPS https://www.codeply.com/go/IHUZcvNjPS
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)