react-pose 延迟姿势组的高度过渡，直到孩子之后

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&nbsp;flipMove={false}>当一个元素退出时，Pose 将其从布局中取出并应用 position: absolute 以便它可以检测周围元素的新位置并通过 FLIP 进行动画处理。虽然它试图找出正确匹配的变换原点，但有时会失败。设置 flipMove={false} 将防止这些问题。来源：https&nbsp;:&nbsp;//popmotion.io/pose/api/posegroup/这是您的代码的工作示例：https&nbsp;:&nbsp;//codesandbox.io/s/jovial-beaver-3o6m3