const Item = posed.div({
enter: {x: 0, opacity: 1},
exit: {x: 1000, opacity: 0}
});
<PoseGroup>
<Item key={whatever}></Item>
</PoseGroup>
目前，当我从列表中删除一个项目时，姿势组 div 变短并且项目同时滑出。如何告诉姿势组在更新姿势组的高度之前等待项目完成动画？要延迟一个项目，你添加delay到配置中，但我如何延迟一个姿势组？
react-pose 延迟姿势组的高度过渡，直到孩子之后
IT技术
javascript
reactjs
animation
popmotion
react-pose
2021-05-22 01:16:03
1个回答
您面临的问题是PoseGroup每个退出元素的集合都position: absolute将其从元素的自然流中移除。这就是为什么其他元素会立即跳起来的原因。
PoseGroup提供了一个props来关闭这个名为flipMove.
<PoseGroup flipMove={false}>
当一个元素退出时，Pose 将其从布局中取出并应用 position: absolute 以便它可以检测周围元素的新位置并通过 FLIP 进行动画处理。
虽然它试图找出正确匹配的变换原点，但有时会失败。设置 flipMove={false} 将防止这些问题。
来源：https : //popmotion.io/pose/api/posegroup/
这是您的代码的工作示例：https : //codesandbox.io/s/jovial-beaver-3o6m3