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

Changes from 1 commit
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
Prev Previous commit
Next Next commit
Update comment for AnimatePresence
  • Loading branch information
@JaeSeoKim
JaeSeoKim committed Aug 17, 2022
commit 75c84c4ce91845089e862a418c96c806a8a8a50d
33 changes: 17 additions & 16 deletions packages/framer-motion/src/components/AnimatePresence/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,25 +269,26 @@ export const AnimatePresence: React.FunctionComponent<
// insert the chunk where the change occurred in the previous location.
//
// presentChildren -> children
// [1] [A]
// [A] [D]
// [2] [E]
// [B] [F]
// [3] [B]
// [A] [1]
// [D] [A]
// [E] [2]
// [F] [B]
// [B] [3]
// [C] [C]
//
// init -> animate -> Exit Complete
// init -> animate -> Exit Complete
//
// [1] [1] <--- presentChunk - 1
// [A] [A] [A] <--- preservingKey
// [2] [2] <--- presentChunk - 2
// [D] [D]
// [E] [E] <--- targetChunk - 1
// [F] [F]
// [B] [B] [B] <--- preservingKey
// [3] [3] <--- presentChunk - 3
// [B] <--- targetChunk - 2
// [C] [C] [C] <--- preservingKey
// [1] [1] <--- presentChunk - 1
// [A] [A] [A] <--- preservingKey
// [2] [2] <--- presentChunk - 2
// [D] [D]
// [E] [E] <--- targetChunk - 1
// [F] [F]
// [B] [B] [B] <--- preservingKey
// [3] [3] <--- presentChunk - 3
// [B] <--- targetChunk - 2
// [C] [C] [C] <--- preservingKey

childrenToRender = []
Array.from({ length: preservingKeys.length + 1 }).forEach((_, i) => {
const key = preservingKeys[i]
Expand Down