реакция-поза задержка перехода высоты группы позы до тех пор, пока не появятся дети

Question

const Item = posed.div({
  enter: {x: 0, opacity: 1},
  exit: {x: 1000, opacity: 0}
});

<PoseGroup>
  <Item key={whatever}></Item>
</PoseGroup>

В настоящее время, когда я удаляю элемент из списка, div группы позы становится короче, и элемент одновременно выдвигается. Как я могу сказать группе позы дождаться завершения анимации элемента, прежде чем обновлять высоту группы позы? Чтобы отложить товар, вы добавляетеdelay в конфиг, но как мне отложить группу позы?

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что PoseGroup устанавливает каждый выходящий элемент на position: absoluteчто выводит его из естественного потока элементов. Вот почему другие элементы сразу подпрыгивают.

PoseGroup предоставил опору для отключения этой функции под названием flipMove.

<PoseGroup flipMove={false}>

Когда элемент выходит, Pose извлекает его из макета и применяет position: absolute, чтобы он мог определять новое положение окружающих элементов и анимировать его через FLIP.

Хотя он пытается выяснить правильное соответствие источника преобразования, бывают случаи, когда это не удается. Установка flipMove={false} предотвратит эти проблемы.

Источник: https://popmotion.io/pose/api/posegroup/

Вот рабочий пример вашего кода: https://codesandbox.io/s/jovial-beaver-3o6m3