Javascript 如何在引导4中设置列大小的动画？

我有一个布局结构，像一行两列，在页面开始时，我应该只看到一列全屏宽，因此，我将其设置为

col-sm-12

，而一旦触发事件，我必须显示右侧列，列设置为

col-sm-4

，并且

col-sm-12

中的主列应变为

col-sm-8

布局如下所示，我举了一个例子，当点击col-sm-12时，我会显示另一列：

$（'.main'）。在（'click'，function（）上{
$（'.main'）.removeClass（'col-sm-12'））
$（'.main'）.addClass（'col-sm-8'））
$（'.side'）.removeClass（'d-none'））
})

html，
身体{
身高：100%；
}
梅因先生{
背景色：#ff23；
}
.这边{
背景色：红色；
}

---

我认为transition css属性应该起作用，但我不确定。尝试设置：

---

div[class*=“col-”]{transition:.3s ease；}

让我知道。

是的，动画就是我要找的，但在此过程中，col-sm-4显示在col-sm-12的下方，直到它开始在这里调整大小，你可以看到发生了什么。。当转换开始时，侧栏出现在底部，整个屏幕在这一点上看起来有问题，这段代码对我来说是有效的，但是在侧面板显示之前有一个.4s秒的延迟。如果这是一个问题，我会尝试找到另一个解决方案。这是更好的方式，但仍然有可能做这样的交易。从右到左的一方？首先，主列很容易被拉伸，侧边只出现在removeClass（'d-none'）之后，这有点难看[我不确定是否有可能使用引导的预定义值，但我将尝试修复它。