如何在引导程序 4 中为 col 调整大小设置动画？

Question

我有一个布局结构，比如一行有两列，在页面开始时我应该只看到一个全屏宽度的列，所以我将它设置为col-sm-12，而一旦触发事件，我必须显示右边列设置为col-sm-4 的侧列和col-sm-12 的主列应变为col-sm-8。

所以布局看起来像这样，我做了一个例子，当点击 col-sm-12 时，我会显示另一列：

$('.main').on('click', function() {
  $('.main').removeClass('col-sm-12')
  $('.main').addClass('col-sm-8')
  $('.side').removeClass('d-none')
})

html,
body {
  height: 100%;
}

.main {
  background-color: #ff23;
}

.side {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<div class="container-fluid h-100">

  <div class="row h-100">
    <div class="col-sm-12 main">

    </div>
    <div class="col-sm-4 d-none side">

    </div>
  </div>


</div>

在此我如何设置从 col-sm-12 到 col-sm-8 的列宽变化的动画？ 我会做一些事情，比如隐藏的列会通过拉伸它或任何其他花哨的动画来推动另一个……

Answer 1

我认为过渡 css 属性应该做的事情，但我不确定。尝试设置： div[class*="col-"] { transition: .3s ease; } 告诉我。