feat: suppport Namespace layoutId

unovue · Dec 28, 2024 · 3a8b608 · 3a8b608
1 parent fdeacd4
commit 3a8b608
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/packages/motion/src/components/Motion.vue b/packages/motion/src/components/Motion.vue
@@ -48,10 +48,23 @@ const parentState = injectMotion(null)
 const attrs = useAttrs()
 const layoutGroup = injectLayoutGroup({} as any)
 const config = useMotionConfig()
+
+/**
+ * Get the layout ID for the motion component
+ * If both layoutGroup.id and props.layoutId exist, combine them with a hyphen
+ * Otherwise return props.layoutId or undefined
+ */
+function getLayoutId() {
+  if (layoutGroup.id && props.layoutId)
+    return `${layoutGroup.id}-${props.layoutId}`
+  return props.layoutId || undefined
+}
+
 function getMotionProps() {
   return {
     ...attrs,
     ...props,
+    layoutId: getLayoutId(),
     transition: props.transition ?? config.value.transition,
     layoutGroup,
     motionConfig: config.value,
@@ -94,7 +107,7 @@ onBeforeUpdate(() => {
 })
 
 onUpdated(() => {
-  state.update(getMotionProps(), checkMotionIsHidden(instance))
+  state.update(getMotionProps())
 })
 
 function getProps() {

diff --git a/playground/nuxt/pages/app-card/index.vue b/playground/nuxt/pages/app-card/index.vue
@@ -34,9 +34,10 @@ useEventListener('keydown', (event: KeyboardEvent) => {
         />
         <AnimatePresence>
           <Motion
-            v-if="activeCard"
+            v-show="activeCard"
             :initial="{ opacity: 0 }"
             :animate="{ opacity: 1 }"
+            layout
             :exit="{ opacity: 0 }"
             class=" overlay pointer-events-none"
           />