react-pose将姿势组的高度转换延迟到孩子之后 [英] react-pose delay the pose group height transition until after children

问题描述

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

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

当前，当我从列表中删除一个项目时，姿势组div会变短，并且该项目会同时滑出.如何通知姿势组等到项目完成动画制作后再更新姿势组的高度?要延迟项目，请在配置中添加 delay ，但是如何延迟姿势组?

Currently when I remove an item from the list, the pose group div gets shorter and the item slides out at the same time. How do I tell the pose group to wait until item has finished animating before updating the height of the pose group? To delay an Item, you add delay to the config, but how do I delay a pose group?

推荐答案

您面临的问题是 PoseGroup 将每个退出元素设置为 position:absolute 将其从元素的自然流动中移除.这就是为什么其他元素立即跳起来的原因.

The issue you're facing is that the PoseGroup sets each exiting element to position: absolute which takes it out of the natural flow of elements. This is why the other elements jump up immediately.

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

PoseGroup provided a prop to turn off this feature called flipMove.

<PoseGroup flipMove={false}>

当元素退出时，Pose将其从布局中移出并应用position:绝对位置，因此它可以检测周围的新位置元素并通过FLIP进行动画处理.

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.

当它试图找出正确的匹配变换源时有时会失败.设置flipMove = {false}将阻止这些问题.

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

Here's a working example of your code: https://codesandbox.io/s/jovial-beaver-3o6m3

这篇关于react-pose将姿势组的高度转换延迟到孩子之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！