Move all children in <Transition /> (#683)

Fixes #682

Author: esquevin

packages/react-pose/src/_tests/index.test.tsx

@@ -321,6 +321,44 @@ test('PoseGroup: Animate conditionally', () => {
   });
 });
 
+test('PoseGroup: All remaining children have a flip transition when one is removed', () => {
+  const items = [1, 2, 3, 4, 5, 6];
+  let nbEnterPoseCompleted = 0;
+  let flipTransitions = [];
+  return new Promise(resolve => {
+    const Group = ({ items }) => (
+      <PoseGroup>
+        {items.map((item, i) => (
+          <Parent
+            key={item}
+            onPoseComplete={poses => {
+              if (poses.includes('enter')) {
+                flipTransitions[i] = poses.includes('flip');
+                nbEnterPoseCompleted += 1;
+                if (nbEnterPoseCompleted === items.length) {
+                  expect(flipTransitions).toEqual([
+                    true,
+                    true,
+                    true,
+                    true,
+                    true
+                  ]);
+                  resolve();
+                }
+              }
+            }}
+          />
+        ))}
+      </PoseGroup>
+    );
+
+    const { rerender } = render(<Group items={items} />);
+    expect(flipTransitions).toEqual([]);
+
+    rerender(<Group items={[...items.slice(0, 2), ...items.slice(3)]} />);
+  });
+});
+
 test('PoseGroup: Forward props from PoseGroup to direct child', () => {
   let x = 0;
   let y = 0;

packages/react-pose/src/components/Transition/children.ts

@@ -95,12 +95,8 @@ const handleTransition = (
 
   const moving = new Set(
     prevKeys.filter((key, i) => {
-      if (entering.has(key)) {
-        return false;
-      }
-
-      const nextIndex = nextKeys.indexOf(key);
-      return nextIndex !== -1 && i !== nextIndex;
+      // if it's not entering or leaving
+      return !entering.has(key) || leaving.indexOf(key) === -1;
     })
   );