Bootstrap-列更改行中的宽度和位置的动画

Question

我正在开发一个在前端使用React和Bootsrap的the应用程序。有多个Bootstrap列可以展开，如下面的CodeSandbox所示。我想要动画这些，因为他们改变宽度和位置在行中。

https://codesandbox.io/s/7jmp1275z6

动画可以是任何东西，只要柱子不会瞬间传送上上下下。上下滑动或左右滑动都可以。

Answer 1

对于进一步的问题，请提供信息，说明你自己做了什么，这样人们就会帮助你。

https://codesandbox.io/s/p7z2m6vmp7

只需添加一些过渡，就像你对任何简单的CSS过渡所做的那样。

在这里，我会给不同的盒子不同的动画，请随意尝试立方贝塞尔曲线！(默认情况下，css也有ease和ease-in-out )

.box:nth-child(1) {
  transition: 1s ease-out;
}

.box:nth-child(2) {
  transition: 1s ease-in;
}

.box:nth-child(3) {
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.box:nth-child(4) {
  transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}