bootstrap 4アニメーション列幅の変更

Question

私はこのような2つの列を持っています：

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

列の幅と位置の両方をアニメーション化する方法を考えています。

Answer 1

Bootstrapが提供する列サイズを使用して列サイズを変更しました。たとえば、col-2からcol-1次に、特定のタイプのみをターゲットにするように遷移を調整しました

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