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 flipMove={false}>

当一个元素退出时，Pose 将其从布局中取出并应用 position: absolute 以便它可以检测周围元素的新位置并通过 FLIP 进行动画处理。

虽然它试图找出正确匹配的变换原点，但有时会失败。设置 flipMove={false} 将防止这些问题。

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

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