react-pose 将姿势组高度转换延迟到 children 之后

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}>

When an element exits, Pose takes it out of the layout and applies position: absolute so it can detect the new position of surrounding elements and animate via FLIP.

While it attempts to figure out the correct matching transform-origin there are times when this fails. Setting flipMove={false} will prevent these issues.

来源：https://popmotion.io/pose/api/posegroup/

这是您的代码的一个工作示例：https://codesandbox.io/s/jovial-beaver-3o6m3

react-pose 将姿势组高度转换延迟到 children 之后

react-pose delay the pose group height transition until after children

javascript

animation

reactjs

popmotion

react-pose