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

Question

我正在前端使用React和Bootsrap开发一个Web应用程序。可以扩展多个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);
}