Анимация для Bootstrap-столбцов, меняющих ширину и положение в строке

Question

Я работаю над веб-приложением, используя React и Bootsrap во внешнем интерфейсе.Там несколько 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);
}