Fixing exit variant propagation

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.6.9] Unreleased
+
+### Fix
+
+-   Exit variant propagation.
+
 ## [1.6.8] 2019-10-02
 
 ### Fix

src/animation/use-value-animation-controls.ts

@@ -4,7 +4,10 @@ import {
 } from "./ValueAnimationControls"
 import { useContext, useEffect } from "react"
 import { MotionProps } from "../motion/types"
-import { MotionContext } from "../motion/context/MotionContext"
+import {
+    MotionContext,
+    MotionContextProps,
+} from "../motion/context/MotionContext"
 import { useConstant } from "../utils/use-constant"
 
 /**
@@ -22,20 +25,27 @@ import { useConstant } from "../utils/use-constant"
 export function useValueAnimationControls<P>(
     config: ValueAnimationConfig,
     props: P & MotionProps,
-    subscribeToParentControls: boolean
+    subscribeToParentControls: boolean,
+    parentContext?: MotionContextProps
 ) {
     const { variants, transition } = props
     const parentControls = useContext(MotionContext).controls
     const controls = useConstant(() => new ValueAnimationControls<P>(config))
 
     // Reset and resubscribe children every render to ensure stagger order is correct
-    controls.resetChildren()
-    controls.setProps(props)
-    controls.setVariants(variants)
-    controls.setDefaultTransition(transition)
+    if (
+        !parentContext ||
+        !parentContext.exitProps ||
+        !parentContext.exitProps.isExiting
+    ) {
+        controls.resetChildren()
+        controls.setProps(props)
+        controls.setVariants(variants)
+        controls.setDefaultTransition(transition)
 
-    if (subscribeToParentControls && parentControls) {
-        parentControls.addChild(controls)
+        if (subscribeToParentControls && parentControls) {
+            parentControls.addChild(controls)
+        }
     }
 
     useEffect(

src/components/AnimatePresence/__tests__/AnimatePresence.test.tsx

@@ -207,8 +207,8 @@ describe("AnimatePresence", () => {
 
     test("Exit propagates through variants", async () => {
         const variants = {
-            enter: { opacity: 1 },
-            exit: { opacity: 0 },
+            enter: { opacity: 1, transition: { type: false } },
+            exit: { opacity: 0, transition: { type: false } },
         }
 
         const promise = new Promise<number>(resolve => {
@@ -218,7 +218,7 @@ describe("AnimatePresence", () => {
                     <AnimatePresence>
                         {isVisible && (
                             <motion.div
-                                initial="exit"
+                                initial="enter"
                                 animate="enter"
                                 exit="exit"
                                 variants={variants}

src/motion/component.tsx

@@ -59,7 +59,8 @@ export const createMotionComponent = <P extends {}>({
         const controls = useValueAnimationControls(
             controlsConfig,
             props,
-            shouldInheritVariant
+            shouldInheritVariant,
+            parentContext
         )
 
         const context = useMotionContext(

src/motion/functionality/exit.ts

@@ -26,7 +26,6 @@ export const Exit: FunctionalComponentDefinition = {
                 ...props,
                 custom: custom !== undefined ? custom : props.custom,
             })
-
             controls.start(exit).then(onExitComplete)
         })