Adding failing test and fixing bug (#2115)

motiondivision · May 9, 2023 · 67cc001 · 67cc001
1 parent f425de9
commit 67cc001
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 7 deletions.
diff --git a/dev/projection/animate-undo-layout-change.html b/dev/projection/animate-undo-layout-change.html
@@ -0,0 +1,74 @@
+<html>
+    <head>
+        <style>
+            body {
+                padding: 0;
+                margin: 0;
+            }
+
+            #parent {
+                width: 100px;
+                height: 100px;
+                background-color: #00cc88;
+            }
+
+            #parent.b {
+                width: 110px;
+                height: 110px;
+            }
+
+            #trigger-overflow {
+                width: 1px;
+                height: 1px;
+                position: absolute;
+                top: 2000px;
+                left: 2000px;
+            }
+
+            [data-layout-correct="false"] {
+                background: #dd1144 !important;
+                opacity: 0.5;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="parent"></div>
+        <div id="trigger-overflow"></div>
+
+        <script src="../../packages/framer-motion/dist/projection.dev.js"></script>
+        <script src="./script-assert.js"></script>
+        <script src="./script-animate.js"></script>
+        <script>
+            const { createNode, relativeEase } = window.Animate
+            const { matchViewportBox } = window.Assert
+
+            const parent = document.getElementById("parent")
+            const parentOrigin = parent.getBoundingClientRect()
+
+            const parentProjection = createNode(
+                parent,
+                undefined,
+                {},
+                { duration: 2 }
+            )
+
+            parentProjection.willUpdate()
+
+            parent.classList.add("b")
+
+            parentProjection.root.didUpdate()
+
+            frame.postRender(() => {
+                parentProjection.willUpdate()
+
+                parent.classList.remove("b")
+
+                parentProjection.root.didUpdate()
+
+                frame.postRender(() => {
+                    matchViewportBox(parent, parentOrigin)
+                })
+            })
+        </script>
+    </body>
+</html>
diff --git a/packages/framer-motion/src/components/AnimatePresence/index.tsx b/packages/framer-motion/src/components/AnimatePresence/index.tsx
@@ -90,9 +90,8 @@ export const AnimatePresence: React.FunctionComponent<
 
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
-    let [forceRender] = useForceUpdate()
-    const forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender
-    if (forceRenderLayoutGroup) forceRender = forceRenderLayoutGroup
+    const forceRender =
+        useContext(LayoutGroupContext).forceRender || useForceUpdate()[0]
 
     const isMounted = useIsMounted()
 

diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -493,10 +493,7 @@ export function createProjectionNode<I>({
                              * finish it immediately. Otherwise it will be animating from a location
                              * that was probably never commited to screen and look like a jumpy box.
                              */
-                            if (
-                                !hasLayoutChanged &&
-                                this.animationProgress === 0
-                            ) {
+                            if (!hasLayoutChanged) {
                                 finishAnimation(this)
                             }