CODEWITHSUNDEEP
javascriptreactjsanimationpopmotionreact-pose
AlexMorley-Finch
AlexMorley-Finch

Reputation: 6975

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>

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?

Upvotes: 2

Views: 355

Answers (1)

Jamie Dixon
Jamie Dixon

Reputation: 54011

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 provided a prop to turn off this feature called flipMove.

<PoseGroup flipMove={false}>

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.

While it attempts to figure out the correct matching transform-origin there are times when this fails. Setting flipMove={false} will prevent these issues.

Source: https://popmotion.io/pose/api/posegroup/

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

Upvotes: 3

Related Questions