Skip to content

Fix AnimatePresence won't unmount fastly changing content #1569

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
JaeSeoKim wants to merge 9 commits into from
Closed

Fix AnimatePresence won't unmount fastly changing content #1569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
29c4a5b
Fix AnimatePresence won't unmount fastly changing content
JaeSeoKim Jun 3, 2022
e728b7f
Change the AnimatePresence childrenToRender algorithm
JaeSeoKim Jun 10, 2022
037e7c7
Remove some comments
JaeSeoKim Jun 10, 2022
75c84c4
Update comment for AnimatePresence
JaeSeoKim Jun 10, 2022
0e4eafe
Fix some comments
JaeSeoKim Jun 10, 2022
cabebf5
Fix AnimatePresence checking all exiting children
JaeSeoKim Jun 10, 2022
b784cb7
Fix comment for AnimatePresence
JaeSeoKim Jun 10, 2022
b6f7064
Remove unnecessary AnimatePresence variable
JaeSeoKim Jun 13, 2022
4348966
Change AnimatePresence memoization logic
JaeSeoKim Aug 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions packages/framer-motion/src/components/AnimatePresence/PresenceChild.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from "react"
import { useId, useMemo } from "react"
import { ComponentKey } from "."
import {
PresenceContext,
PresenceContextProps,
Expand All @@ -11,11 +12,12 @@ import { PopChild } from "./PopChild"
interface PresenceChildProps {
children: React.ReactElement
isPresent: boolean
onExitComplete?: () => void
onExitComplete?: (key: ComponentKey) => void
initial?: false | VariantLabels
custom?: any
presenceAffectsLayout: boolean
mode: "sync" | "popLayout" | "wait"
childKey: ComponentKey
}

export const PresenceChild = ({
Expand All @@ -26,6 +28,7 @@ export const PresenceChild = ({
custom,
presenceAffectsLayout,
mode,
childKey,
}: PresenceChildProps) => {
const presenceChildren = useConstant(newChildrenMap)
const id = useId()
Expand All @@ -43,7 +46,7 @@ export const PresenceChild = ({
if (!isComplete) return // can stop searching when any is incomplete
}

onExitComplete?.()
onExitComplete?.(childKey)
},
register: (childId: string) => {
presenceChildren.set(childId, false)
Expand All @@ -67,7 +70,7 @@ export const PresenceChild = ({
* component immediately.
*/
React.useEffect(() => {
!isPresent && !presenceChildren.size && onExitComplete?.()
!isPresent && !presenceChildren.size && onExitComplete?.(childKey)
}, [isPresent])

if (mode === "popLayout") {
Expand Down
Loading