Merge pull request #1299 from framer/fix/cancelled-animations-notify-…

…when-done Fix cancelled animations neglecting to notify they are done
framer · Oct 22, 2021 · 22601f1 · 22601f1
2 parents 0568791 + c225c23
commit 22601f1
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 8 deletions.
diff --git a/cypress/integration/layout-cancelled-finishes.ts b/cypress/integration/layout-cancelled-finishes.ts
@@ -0,0 +1,12 @@
+describe("Cancelled Animation", () => {
+    it("Allows the animation to be marked complete", () => {
+        cy.visit("?test=layout-cancelled-finishes")
+            .get("[data-testid='cancellable']")
+            .trigger("click")
+            .wait(200)
+            .should(($cancellable: any) => {
+                const cancellable = $cancellable[0] as HTMLDivElement
+                expect(cancellable).to.not.exist
+            })
+    })
+})
diff --git a/dev/tests/layout-cancelled-finishes.tsx b/dev/tests/layout-cancelled-finishes.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import { motion, AnimatePresence, useInstantLayoutTransition } from "@framer"
+
+export const App = () => {
+    const [isVisible, setIsVisible] = React.useState(true)
+    const startTransition = useInstantLayoutTransition()
+
+    return (
+        <AnimatePresence>
+            {isVisible && (
+                <motion.div
+                    onClick={() => startTransition(() => setIsVisible(false))}
+                    data-testid="cancellable"
+                    style={{ height: 100 }}
+                />
+            )}
+        </AnimatePresence>
+    )
+}
diff --git a/src/motion/features/animations.ts b/src/motion/features/animations.ts
@@ -27,7 +27,7 @@ export const animations: FeatureComponents = {
     ),
     exit: makeRenderlessComponent((props: FeatureProps) => {
         const { custom, visualElement } = props
-        const [isPresent, onExitComplete] = usePresence()
+        const [isPresent, safeToRemove] = usePresence()
         const presenceContext = useContext(PresenceContext)
 
         useEffect(() => {
@@ -37,7 +37,7 @@ export const animations: FeatureComponents = {
                 { custom: presenceContext?.custom ?? custom }
             )
 
-            !isPresent && animation?.then(onExitComplete)
+            !isPresent && animation?.then(safeToRemove)
         }, [isPresent])
     }),
 }
diff --git a/src/motion/features/layout/MeasureLayout.tsx b/src/motion/features/layout/MeasureLayout.tsx
@@ -54,7 +54,13 @@ class MeasureLayoutWithContext extends React.Component<
     }
 
     getSnapshotBeforeUpdate(prevProps: FeatureProps & MeasureContextProps) {
-        const { layoutDependency, visualElement, drag, isPresent } = this.props
+        const {
+            layoutDependency,
+            visualElement,
+            drag,
+            isPresent,
+            safeToRemove,
+        } = this.props
         const projection = visualElement.projection
 
         if (!projection) return null
@@ -74,13 +80,15 @@ class MeasureLayoutWithContext extends React.Component<
             layoutDependency === undefined
         ) {
             projection.willUpdate()
+        } else {
+            safeToRemove?.()
         }
 
         if (prevProps.isPresent !== isPresent) {
             if (isPresent) {
                 projection.promote()
-            } else {
-                projection.relegate()
+            } else if (!projection.relegate()) {
+                safeToRemove?.()
             }
         }
 

diff --git a/src/projection/node/create-projection-node.ts b/src/projection/node/create-projection-node.ts
@@ -403,7 +403,10 @@ export function createProjectionNode<I>({
                     }: LayoutUpdateData) => {
                         const dragControls =
                             elementDragControls.get(visualElement)
-                        if (dragControls?.isDragging) return
+                        if (dragControls?.isDragging) {
+                            this.options.onExitComplete?.()
+                            return
+                        }
 
                         // TODO: Check here if an animation exists
                         const layoutTransition =
@@ -453,6 +456,8 @@ export function createProjectionNode<I>({
                                 ),
                                 onComplete: onLayoutAnimationComplete,
                             })
+                        } else {
+                            this.options.onExitComplete?.()
                         }
 
                         this.targetLayout = newLayout
@@ -492,7 +497,10 @@ export function createProjectionNode<I>({
         }
 
         willUpdate(shouldNotifyListeners = true) {
-            if (this.root.isUpdateBlocked()) return
+            if (this.root.isUpdateBlocked()) {
+                this.options.onExitComplete?.()
+                return
+            }
             !this.root.isUpdating && this.root.startUpdate()
             if (this.isLayoutDirty) return
 
@@ -534,7 +542,6 @@ export function createProjectionNode<I>({
                 this.nodes!.forEach(clearMeasurements)
                 return
             }
-
             if (!this.isUpdating) return
 
             this.isUpdating = false
@@ -1553,6 +1560,8 @@ function notifyLayoutUpdate(node: IProjectionNode) {
             hasLayoutChanged,
             hasRelativeTargetChanged,
         })
+    } else {
+        node.options.onExitComplete?.()
     }
 
     /**