Bootstrap 列的动画改变行中的宽度和位置答案

【问题标题】：Animation for Bootstrap-columns changing width and position in rowBootstrap 列的动画改变行中的宽度和位置
【发布时间】：2019-02-16 18:39:20
【问题描述】：

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

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

动画几乎可以是任何东西，只要列不只是立即上下传送。上下滑动或左右滑动都可以。

【问题讨论】：

标签： reactjs twitter-bootstrap bootstrap-4

【解决方案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);
}

【讨论】：

我想我不太擅长提问。或者用文字表达自己。真正困扰我的部分是在列垂直对齐位置时添加动画。但是感谢您提供这些信息，可能对我目前所拥有的有所帮助。
嗯，没关系，我在这附近没那么资深，所以我能理解！对于像这样的样式的更多问题，你最好使用 css 标签，因为它不是 reactjs 问题，所以更多的人可能会提供帮助。