Merge pull request #989 from framer/fix/after-children

Fixing afterChildren
framer · Feb 19, 2021 · 02b334b · 02b334b
2 parents 029d744 + 93570e9
commit 02b334b
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 91 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.5.3] 2021-02-19
+
+### Fixed
+
+-   Fixing bug with `afterChildren` and `exit` animations.
+
 ## [3.5.2] 2021-02-18
 
 ### Added

diff --git a/dev/examples/AnimatePresence-variants.tsx b/dev/examples/AnimatePresence-variants.tsx
@@ -26,9 +26,11 @@ const itemVariants = {
 
 const listVariants = {
     open: {
-        transition: { staggerChildren: 0.07, when: "beforeChildren" },
+        opacity: 1,
+        transition: { staggerChildren: 1, when: "beforeChildren" },
     },
     closed: {
+        opacity: 0,
         transition: {
             when: "afterChildren",
             staggerChildren: 0.3,
@@ -49,27 +51,25 @@ export const App = () => {
     return (
         <AnimatePresence initial={false} onRest={() => console.log("rest")}>
             {isVisible && (
-                <motion.div
+                <motion.ul
                     key="a"
                     initial={"closed"}
                     exit={"closed"}
                     animate="open"
-                    variants={itemVariants}
+                    variants={listVariants}
                     transition={{ duration: 1 }}
                     style={style}
                 >
-                    <motion.ul variants={listVariants}>
-                        <motion.li variants={itemVariants} style={item}>
-                            Test
-                        </motion.li>
-                        <motion.li variants={itemVariants} style={item}>
-                            Test
-                        </motion.li>
-                        <motion.li variants={itemVariants} style={item}>
-                            Test
-                        </motion.li>
-                    </motion.ul>
-                </motion.div>
+                    <motion.li variants={itemVariants} style={item}>
+                        Test
+                    </motion.li>
+                    <motion.li variants={itemVariants} style={item}>
+                        Test
+                    </motion.li>
+                    <motion.li variants={itemVariants} style={item}>
+                        Test
+                    </motion.li>
+                </motion.ul>
             )}
         </AnimatePresence>
     )

diff --git a/src/components/AnimatePresence/__tests__/AnimatePresence.test.tsx b/src/components/AnimatePresence/__tests__/AnimatePresence.test.tsx
@@ -2,6 +2,7 @@ import { render } from "../../../../jest.setup"
 import * as React from "react"
 import { AnimatePresence, motion, MotionConfig, useAnimation } from "../../.."
 import { motionValue } from "../../../value"
+import { ResolvedValues } from "../../../render/types"
 
 describe("AnimatePresence", () => {
     test("Allows initial animation if no `initial` prop defined", async () => {
@@ -95,6 +96,53 @@ describe("AnimatePresence", () => {
         expect(child).toBeFalsy()
     })
 
+    test("when: afterChildren fires correctly", async () => {
+        const promise = new Promise<number>((resolve) => {
+            const parentOpacityOutput: ResolvedValues[] = []
+
+            const variants = {
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            }
+
+            const Component = ({ isVisible }: { isVisible: boolean }) => {
+                return (
+                    <AnimatePresence>
+                        {isVisible && (
+                            <motion.div
+                                initial={false}
+                                animate="visible"
+                                exit="hidden"
+                                transition={{
+                                    duration: 0.2,
+                                    when: "afterChildren",
+                                }}
+                                variants={variants}
+                                onUpdate={(v) => parentOpacityOutput.push(v)}
+                                onAnimationComplete={() =>
+                                    resolve(parentOpacityOutput.length)
+                                }
+                            >
+                                <motion.div
+                                    variants={variants}
+                                    transition={{ type: false }}
+                                />
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                )
+            }
+
+            const { rerender } = render(<Component isVisible />)
+            rerender(<Component isVisible />)
+            rerender(<Component isVisible={false} />)
+            rerender(<Component isVisible={false} />)
+        })
+
+        const child = await promise
+        expect(child).toBeGreaterThan(1)
+    })
+
     test("Animates a component back in if it's re-added before animating out", async () => {
         const promise = new Promise<Element | null>((resolve) => {
             const Component = ({ isVisible }: { isVisible: boolean }) => {

diff --git a/src/index.ts b/src/index.ts
@@ -127,6 +127,7 @@ export {
     Variants,
 } from "./types"
 export { EventInfo } from "./events/types"
+export { VisualElementLifecycles } from "./render/utils/lifecycles"
 export { MotionFeature, FeatureProps } from "./motion/features/types"
 export { DraggableProps, DragHandlers } from "./gestures/drag/types"
 export { LayoutProps } from "./motion/features/layout/types"