javascript - 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到配置中，但是我如何延迟一个姿势组？

score 3 · Accepted Answer

您面临的问题是PoseGroup集合每个现有元素将position: absolute其从元素的自然流中取出。这就是为什么其他元素立即跳起来的原因。

PoseGroup提供了一个道具来关闭此功能，称为flipMove.

<PoseGroup flipMove={false}>

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

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

1 回答 1