Реакция анимации изменения порядка предметов

Question

Когда я закрываю это расширяющееся окно, я бы хотел, чтобы другие элементы списка плавно вернулись в исходное положение и не прыгали, как сейчас.Как мне этого добиться, я понятия не имею, как решить эту проблему.

Редактировать: Элементы списка являются массивом компонентов.Expandable переключается с OnClickEvent, который изменяет bool в состоянии и условную кавычку рендеринга, как это:

{this.state.expanded && <div> Expandable </div>

Answer 1

Я заставил его работать так, как я хотел, анимируя высоту расширяемого окна.Просто для дальнейшего использования я использую React CSSTransitionGroup для анимации этого расширяемого.

Вот результат:

Все еще нужноВыполните некоторую тонкую настройку, хотя

Если кто-то найдет лучшее решение, хотя вы можете опубликовать его, так как я узнал, что вам следует избегать анимации любого свойства, но: непрозрачность, масштаб, положение и вращение