React Pose: PoseGroup does not animate elements before the one being removed

[esquevin]

Describe the bug

Not all elements are being animated when a PoseGroup child is removed / added

How to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/m4j1py31xx
2. Click on one of the middle elements
3. You can see elements on the right smoothly translating to their new position while elements on the left jump to their new position without animation

This behavior is even more obvious when clicking on the leftmost or rightmost element

Expected behaviour

I'd expect all elements to be transitionned to their new position

Device information

In which environment are you reproducing the bug?

• Device: [e.g. iPhone6]
• OS: macOS
• Browser: chrome, safari
• Version 4.0.4

[Antho2407]

Also getting this issue 👍

[esquevin]

After looking at react pose code, I'd say the issue is in react-pose/src/components/Transition/children.ts

    var moving = new Set(prevKeys.filter(function (key, i) {
        if (entering.has(key)) {
            return false;
        }
        var nextIndex = nextKeys.indexOf(key);
        return nextIndex !== -1 && i !== nextIndex;
    }));

This code doesn't realize that an element before the one being removed can be moved if the layout is not left or top aligned.

[mattgperry]

Published as 4.0.5