From 9294fea0e0c23ef26cd5d18299d056eae476027e Mon Sep 17 00:00:00 2001
From: Persephone Flores <34418758+hp0844182@users.noreply.github.com>
Date: Mon, 22 Sep 2025 00:04:07 +0800
Subject: [PATCH] fix: improve unmount delay logic for layout animations
---
packages/motion/src/state/motion-state.ts | 43 +-
playground/nuxt/package.json | 2 +-
.../nuxt/pages/layout-id-tabs/index.vue | 1 -
playground/nuxt/pages/test.vue | 305 ++++--
pnpm-lock.yaml | 877 +++++++++++++++---
5 files changed, 985 insertions(+), 243 deletions(-)
diff --git a/packages/motion/src/state/motion-state.ts b/packages/motion/src/state/motion-state.ts
index ad4f619f..2024b131 100644
--- a/packages/motion/src/state/motion-state.ts
+++ b/packages/motion/src/state/motion-state.ts
@@ -137,17 +137,12 @@ export class MotionState {
this.element = element
this.updateOptions(options)
+ const shouldDelay = this.options.layoutId && this.visualElement.projection.getStack()?.members.length > 0
// Mount features in parent-to-child order
this.featureManager.mount()
if (!notAnimate && this.options.animate) {
this.startAnimation?.()
}
- if (this.options.layoutId) {
- mountedLayoutIds.add(this.options.layoutId)
- frame.render(() => {
- mountedLayoutIds.clear()
- })
- }
}
clearAnimation() {
@@ -173,28 +168,22 @@ export class MotionState {
}
unmount(unMountChildren = false) {
- /**
- * Unlike React, within the same update cycle, the execution order of unmount and mount depends on the component's order in the component tree.
- * Here we delay unmount for components with layoutId to ensure unmount executes after mount for layout animations.
- */
- const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId)
- const unmount = () => {
- const unmountState = () => {
- if (unMountChildren) {
- Array.from(this.children).reverse().forEach(this.unmountChild)
- }
- this.parent?.children?.delete(this)
- mountedStates.delete(this.element)
- this.featureManager.unmount()
- this.visualElement?.unmount()
- // clear animation
- this.clearAnimation()
- }
- // Delay unmount if needed for layout animations
- shouldDelay ? Promise.resolve().then(unmountState) : unmountState()
+ const shouldDelay = this.options.layoutId && this.visualElement.projection?.getStack().lead === this.visualElement.projection && this.visualElement.projection.isProjecting()
+ if (shouldDelay) {
+ Promise.resolve().then(() => {
+ this.unmount(unMountChildren)
+ })
+ return
}
-
- unmount()
+ if (unMountChildren) {
+ Array.from(this.children).reverse().forEach(this.unmountChild)
+ }
+ this.parent?.children?.delete(this)
+ mountedStates.delete(this.element)
+ this.featureManager.unmount()
+ this.visualElement?.unmount()
+ // clear animation
+ this.clearAnimation()
}
private unmountChild(child: MotionState) {
diff --git a/playground/nuxt/package.json b/playground/nuxt/package.json
index 9d24dbf0..8379b7d5 100644
--- a/playground/nuxt/package.json
+++ b/playground/nuxt/package.json
@@ -13,7 +13,7 @@
"motion-number-vue": "latest",
"motion-plus-vue": "0.1.0",
"motion-v": "workspace:*",
- "nuxt": "^3.16.0",
+ "nuxt": "3.15.4",
"reka-ui": "^2.0.0",
"vue": "latest",
"vue-router": "latest"
diff --git a/playground/nuxt/pages/layout-id-tabs/index.vue b/playground/nuxt/pages/layout-id-tabs/index.vue
index 52ecd0fd..197f8fde 100644
--- a/playground/nuxt/pages/layout-id-tabs/index.vue
+++ b/playground/nuxt/pages/layout-id-tabs/index.vue
@@ -33,7 +33,6 @@ const selectedTab = ref(tabs[0])
:initial="{ y: 10, opacity: 0 }"
:animate="{ y: 0, opacity: 1 }"
:exit="{ y: -10, opacity: 0 }"
- :transition="{ duration: 3 }"
>
{{ selectedTab ? selectedTab.icon : '😋' }}
diff --git a/playground/nuxt/pages/test.vue b/playground/nuxt/pages/test.vue
index c54e38f2..f74d5770 100644
--- a/playground/nuxt/pages/test.vue
+++ b/playground/nuxt/pages/test.vue
@@ -1,93 +1,238 @@
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
+
+
+
+ {{ item.title }}
+
+
+
+
+ {{ item.buttonText }}
+
+
+
+
+
+
+
+