Fixing

motiondivision · May 23, 2023 · ce05e55 · ce05e55
1 parent bca0145
commit ce05e55
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 7 deletions.
diff --git a/dev/tests/layout-repeat-new.tsx b/dev/tests/layout-repeat-new.tsx
@@ -0,0 +1,57 @@
+import { motion } from "framer-motion"
+import * as React from "react"
+import { useState } from "react"
+
+function range(num: number) {
+    return Array.from(Array(num).keys())
+}
+
+const sharedMotionProps = {
+    layout: true,
+    style: { background: "red", width: "100%", height: "100px" },
+    transition: {
+        duration: 0.25,
+        delay: 0.3,
+        ease: [0.2, 0.0, 0.83, 0.83],
+        layout: { duration: 0.3, ease: [0.2, 0.0, 0.83, 0.83] },
+    },
+}
+
+export function App() {
+    const [count, setCount] = useState(0)
+
+    return (
+        <>
+            <div style={{ height: 50 }}>
+                <button id="add" onClick={() => setCount((c) => c + 1)}>
+                    Add item
+                </button>
+                <button id="reset" onClick={() => setCount(0)}>
+                    Reset
+                </button>
+            </div>
+            <div
+                style={{
+                    display: "grid",
+                    gridTemplateColumns:
+                        "repeat(auto-fill, minmax(127px, 1fr))",
+                    gridGap: "10px",
+                    minHeight: "100px",
+                    width: "500px",
+                }}
+            >
+                {range(count)
+                    .reverse()
+                    .map((i) => (
+                        <motion.div
+                            id={`box-${i}`}
+                            key={i}
+                            {...sharedMotionProps}
+                        >
+                            {i}
+                        </motion.div>
+                    ))}
+            </div>
+        </>
+    )
+}
diff --git a/packages/framer-motion/cypress/integration/layout.ts b/packages/framer-motion/cypress/integration/layout.ts
@@ -198,4 +198,61 @@ describe("Layout animation", () => {
                 })
             })
     })
+
+    it("Newly-entering elements animate as expected", () => {
+        cy.visit("?test=layout-repeat-new")
+            .wait(50)
+            .get("#add")
+            .trigger("click")
+            .wait(50)
+            .get("#box-0")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 50,
+                    left: 0,
+                    width: 160,
+                    height: 100,
+                })
+            })
+            .get("#add")
+            .trigger("click")
+            .wait(50)
+            .get("#box-1")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 50,
+                    left: 0,
+                    width: 160,
+                    height: 100,
+                })
+            })
+            .get("#box-0")
+            .should(([$box]: any) => {
+                const bbox = $box.getBoundingClientRect()
+                expect(bbox.left).not.to.equal(170)
+            })
+            .get("#reset")
+            .trigger("click")
+            .wait(50)
+            .get("#add")
+            .trigger("click")
+            .wait(50)
+            .get("#box-0")
+            .should(([$box]: any) => {
+                expectBbox($box, {
+                    top: 50,
+                    left: 0,
+                    width: 160,
+                    height: 100,
+                })
+            })
+            .get("#add")
+            .trigger("click")
+            .wait(50)
+            .get("#box-0")
+            .should(([$box]: any) => {
+                const bbox = $box.getBoundingClientRect()
+                expect(bbox.left).not.to.equal(170)
+            })
+    })
 })
diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -362,7 +362,7 @@ export function createProjectionNode<I>({
         /**
          * Lifecycles
          */
-        mount(instance: I, isLayoutDirty = this.root.hasTreeAnimated) {
+        mount(instance: I, isLayoutDirty: boolean = this.root.hasTreeAnimated) {
             if (this.instance) return
 
             this.isSVG = isSVGElement(instance)
@@ -560,6 +560,7 @@ export function createProjectionNode<I>({
                 this.options.onExitComplete && this.options.onExitComplete()
                 return
             }
+
             !this.root.isUpdating && this.root.startUpdate()
             if (this.isLayoutDirty) return
 
@@ -598,15 +599,16 @@ export function createProjectionNode<I>({
             // When doing an instant transition, we skip the layout update,
             // but should still clean up the measurements so that the next
             // snapshot could be taken correctly.
-            if (updateWasBlocked) {
-                this.unblockUpdate()
-                this.clearAllSnapshots()
+            if (!this.isUpdating || updateWasBlocked) {
+                if (updateWasBlocked) {
+                    this.unblockUpdate()
+                    this.clearAllSnapshots()
+                }
+
                 this.nodes!.forEach(clearMeasurements)
                 return
             }
 
-            if (!this.isUpdating) return
-
             this.isUpdating = false
 
             /**
@@ -732,7 +734,6 @@ export function createProjectionNode<I>({
 
             const prevLayout = this.layout
             this.layout = this.measure(false)
-
             this.layoutCorrected = createBox()
             this.isLayoutDirty = false
             this.projectionDelta = undefined
@@ -1845,6 +1846,7 @@ function updateLayout(node: IProjectionNode) {
 }
 
 function notifyLayoutUpdate(node: IProjectionNode) {
+    node.isLayoutDirty = false
     const snapshot = node.resumeFrom?.snapshot || node.snapshot
 
     if (