fix: #83、exit delay

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-motion",
-  "version": "0.10.0",
+  "version": "0.11.0-beta.4",
   "private": true,
   "packageManager": "pnpm@9.15.0+sha1.8bfdb6d72b4d5fdf87d21d27f2bfbe2b21dd2629",
   "description": "",

packages/motion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.10.0",
+  "version": "0.11.0-beta.4",
   "description": "",
   "author": "",
   "license": "MIT",

packages/motion/src/components/LayoutGroup.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { type LayoutGroupProps, useLayoutGroupProvider } from './use-layout-group'
 
-const props = defineProps<LayoutGroupProps>()
+const props = withDefaults(defineProps<LayoutGroupProps>(), {
+  inherit: true,
+})
 const { forceRender, key } = useLayoutGroupProvider(props)
 </script>
 

packages/motion/src/components/animate-presence/AnimatePresence.vue

@@ -4,20 +4,19 @@ import { mountedStates } from '@/state'
 import { doneCallbacks, provideAnimatePresence, removeDoneCallback } from '@/components/presence'
 import type { AnimatePresenceProps } from './types'
 import { usePopLayout } from './use-pop-layout'
-import { frame } from 'framer-motion/dom'
+import { delay } from '@/utils/delay'
 
-// 定义组件选项
 defineOptions({
   name: 'AnimatePresence',
   inheritAttrs: true,
 })
 
-// 设置Props默认值
 const props = withDefaults(defineProps<AnimatePresenceProps>(), {
   mode: 'sync',
   initial: true,
   multiple: false,
   unwrapElement: false,
+  anchorX: 'left',
 })
 
 const presenceContext = {
@@ -29,34 +28,37 @@ provideAnimatePresence(presenceContext)
 onMounted(() => {
   presenceContext.initial = undefined
 })
+const { addPopStyle, removePopStyle, styles } = usePopLayout(props)
 
-// 处理元素进入动画
 function enter(el: HTMLElement) {
   const state = mountedStates.get(el)
   if (!state) {
     return
   }
+  removePopStyle(state)
   state.isVShow = true
   removeDoneCallback(el)
-  state.setActive('exit', false)
+  /**
+   * Delay to ensure animations read the latest state before triggering.
+   * This allows the animation system to capture updated values after component updates.
+   */
+  delay(() => {
+    state.setActive('exit', false)
+  })
 }
 
-const { addPopStyle, removePopStyle, styles } = usePopLayout(props)
-
 const exitDom = new Map<Element, boolean>()
 
 onUnmounted(() => {
   exitDom.clear()
 })
-// 处理元素退出动画
 function exit(el: Element, done: VoidFunction) {
-  let state = mountedStates.get(el)
-  if (!state) {
-    if (!props.unwrapElement) {
-      return done()
-    }
+  if (props.unwrapElement) {
     el = el.firstElementChild as Element
-    state = mountedStates.get(el)
+  }
+  const state = mountedStates.get(el)
+  if (!state) {
+    return done()
   }
   exitDom.set(el, true)
   removeDoneCallback(el)
@@ -77,20 +79,23 @@ function exit(el: Element, done: VoidFunction) {
         state.willUpdate('done')
       }
       else {
-        frame.render(() => {
-          removePopStyle(state)
-        })
+        removePopStyle(state)
       }
       done()
-
-      if (!el?.isConnected) {
+      if (!el.isConnected) {
         state.unmount(true)
       }
     }
   }
   doneCallbacks.set(el, doneCallback)
   el.addEventListener('motioncomplete', doneCallback)
-  state.setActive('exit', true)
+  /**
+   * Delay to ensure animations read the latest state before triggering.
+   * This allows the animation system to capture updated values after component updates.
+   */
+  delay(() => {
+    state.setActive('exit', true)
+  })
 }
 
 const transitionProps = computed(() => {
@@ -117,7 +122,3 @@ const transitionProps = computed(() => {
     <slot />
   </component>
 </template>
-
-<style scoped>
-
-</style>

packages/motion/src/components/animate-presence/types.ts

@@ -11,4 +11,5 @@ export interface AnimatePresenceProps {
   custom?: any
   onExitComplete?: VoidFunction
   unwrapElement?: boolean
+  anchorX?: 'left' | 'right'
 }

packages/motion/src/components/animate-presence/use-pop-layout.ts

@@ -1,41 +1,43 @@
 import { useMotionConfig } from '@/components/motion-config/context'
 import type { AnimatePresenceProps } from './types'
 import type { MotionState } from '@/state'
+import { frame } from 'framer-motion/dom'
 
 export function usePopLayout(props: AnimatePresenceProps) {
   const styles = new WeakMap<MotionState, HTMLStyleElement>()
   const config = useMotionConfig()
-
   function addPopStyle(state: MotionState) {
     if (props.mode !== 'popLayout')
       return
+    const parent = state.element.offsetParent
+    const parentWidth
+                = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0
     const size = {
       height: state.element.offsetHeight || 0,
       width: state.element.offsetWidth || 0,
       top: state.element.offsetTop,
       left: state.element.offsetLeft,
+      right: 0,
     }
+    size.right = parentWidth - size.width - size.left
+    const x = props.anchorX === 'left' ? `left: ${size.left}` : `right: ${size.right}`
+
     state.element.dataset.motionPopId = state.id
     const style = document.createElement('style')
     if (config.value.nonce) {
       style.nonce = config.value.nonce
     }
     styles.set(state, style)
     document.head.appendChild(style)
-    style.textContent = `
-      [data-motion-pop-id="${state.id}"] {
-        animation: pop 0.3s ease-in-out;
-      }
-    `
     if (style.sheet) {
       style.sheet.insertRule(`
     [data-motion-pop-id="${state.id}"] {
       position: absolute !important;
       width: ${size.width}px !important;
       height: ${size.height}px !important;
       top: ${size.top}px !important;
-          left: ${size.left}px !important;
-        }
+      ${x}px !important;
+      }
       `)
     }
   }
@@ -45,7 +47,7 @@ export function usePopLayout(props: AnimatePresenceProps) {
     if (!style)
       return
     styles.delete(state)
-    requestIdleCallback(() => {
+    frame.render(() => {
       document.head.removeChild(style)
     })
   }

packages/motion/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './animate-presence'
 export * from './motion-config'
 export * from './reorder'
 export { default as RowValue } from './RowValue.vue'
+export { mountedStates } from '@/state'

packages/motion/src/components/motion/NameSpace.ts

@@ -2,6 +2,7 @@ import type { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, Intrins
 import { defineComponent, h } from 'vue'
 import Motion from './Motion.vue'
 import type { MotionProps } from './Motion.vue'
+import type { MotionHTMLAttributes } from '@/types'
 
 type ComponentProps<T> = T extends DefineComponent<
   ExtractPropTypes<infer Props>,
@@ -15,7 +16,9 @@ type MotionComponentProps = {
 }
 type MotionKeys = keyof MotionComponentProps
 
-interface MotionNameSpace extends Record<keyof IntrinsicElementAttributes, DefineComponent<MotionProps<keyof IntrinsicElementAttributes, unknown>>> {
+type MotionNameSpace = {
+  [K in keyof IntrinsicElementAttributes]: DefineComponent<MotionProps<K, unknown> & MotionHTMLAttributes<K>>
+} & {
   create: MotionComponentProps['create']
 }
 

packages/motion/src/features/layout/layout.ts

@@ -19,22 +19,22 @@ export class LayoutFeature extends Feature {
   }
 
   didUpdate() {
-    if (this.state.options.layout || this.state.options.layoutId)
+    if (this.state.options.layout || this.state.options.layoutId || this.state.options.drag)
       this.state.visualElement.projection?.root?.didUpdate()
   }
 
   mount() {
     const options = this.state.options
     const layoutGroup = this.state.options.layoutGroup
-    if (options.layout || options.layoutId || options.drag) {
+    if (options.layout || options.layoutId) {
       const projection = this.state.visualElement.projection
       if (projection) {
         projection.promote()
         layoutGroup?.group?.add(projection)
       }
-      this.didUpdate()
       globalProjectionState.hasEverUpdated = true
     }
+    this.didUpdate()
   }
 
   beforeUnmount(): void {
@@ -55,10 +55,15 @@ export class LayoutFeature extends Feature {
     const layoutGroup = this.state.options.layoutGroup
     const projection = this.state.visualElement.projection
 
-    if (layoutGroup?.group && projection) {
-      layoutGroup.group.remove(projection)
-    }
-    else {
+    if (projection) {
+      if (layoutGroup?.group) {
+        layoutGroup.group.remove(projection)
+      }
+
+      // Check lead's animation progress, if it exists, skip update to prevent lead from jumping
+      if (projection.getStack()?.lead?.animationProgress) {
+        return
+      }
       this.didUpdate()
     }
   }

packages/motion/src/index.ts

@@ -1,4 +1,5 @@
 export * from 'framer-motion/dom'
+export { addScaleCorrector } from 'framer-motion/dist/es/projection/styles/scale-correction.mjs'
 export { motionValue as useMotionValue } from 'framer-motion/dom'
 export * from './components'
 export { default as LayoutGroup } from './components/LayoutGroup.vue'

packages/motion/src/state/animate-updates.ts

@@ -40,13 +40,11 @@ export function animateUpdates(
   this.target = { ...this.baseTarget }
   const animationOptions: Record<string, $Transition> = {}
   const transition = { ...this.options.transition }
-
   // 处理直接动画或状态动画
   if (directAnimate)
     resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions)
   else
     resolveStateAnimation.call(this, controlActiveState, animationOptions)
-
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay)
   const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback)
 
@@ -120,7 +118,6 @@ function createAnimationFactories(
   Object.keys(this.target).forEach((key: any) => {
     if (!hasChanged(prevTarget[key], this.target[key]))
       return
-
     this.baseTarget[key] ??= style.get(this.element, key) as string
     const keyValue = this.target[key] === 'none' ? transformResetValue[key] : this.target[key]
     const targetTransition = animationOptions[key]

packages/motion/src/state/motion-state.ts

@@ -174,38 +174,36 @@ export class MotionState {
   // Unmount motion state and optionally unmount children
   // Handles unmounting in the correct order based on component tree
   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 = () => {
-      mountedStates.delete(this.element)
-      this.featureManager.unmount()
-      if (unMountChildren && !shouldDelay) {
-        frame.render(() => {
-          this.visualElement?.unmount()
-        })
+      if (unMountChildren) {
+        Array.from(this.children).reverse().forEach(this.unmountChild)
       }
-      else {
+
+      const unmountState = () => {
+        this.parent?.children?.delete(this)
+        mountedStates.delete(this.element)
+        this.featureManager.unmount()
         this.visualElement?.unmount()
       }
-      // Recursively unmount children in child-to-parent order
-      if (unMountChildren) {
-        const unmountChild = (child: MotionState) => {
-          child.unmount(true)
-          child.children?.forEach(unmountChild)
-        }
-        Array.from(this.children).forEach(unmountChild)
+      // Delay unmount if needed for layout animations
+      if (shouldDelay) {
+        Promise.resolve().then(unmountState)
+      }
+      else {
+        unmountState()
       }
-      this.parent?.children?.delete(this)
     }
 
-    // Delay unmount if needed for layout animations
-    if (shouldDelay) {
-      Promise.resolve().then(() => {
-        unmount()
-      })
-    }
-    else {
-      unmount()
-    }
+    unmount()
+  }
+
+  private unmountChild(child: MotionState) {
+    child.unmount(true)
   }
 
   // Called before updating, executes in parent-to-child order
@@ -236,7 +234,7 @@ export class MotionState {
     })
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive,
+        isFallback: !isActive && name !== 'exit' && this.visualElement.isControllingVariants,
       })
     }
   }

packages/motion/src/state/utils.ts

@@ -49,7 +49,7 @@ export function removeItem<T>(array: T[], item: T) {
 }
 
 export function getOptions(options: $Transition, key: string): $Transition {
-  return options[key as any] ? { ...options, ...options[key as any] } : { ...options }
+  return options[key as any] ? { ...options, ...options[key as any], [key]: undefined } : { ...options }
 }
 
 export function isCssVar(name: string) {

packages/motion/src/types/motion-values.ts

@@ -1,6 +1,6 @@
 import type { MotionValue } from 'framer-motion/dom'
-import type { Options } from './state'
-import type { AriaAttributes, Events, SVGAttributes } from 'vue'
+import type { ElementType, Options } from './state'
+import type { AriaAttributes, Events, IntrinsicElementAttributes, SVGAttributes } from 'vue'
 
 type EventHandlers<E> = {
   [K in keyof E]?: E[K] extends (...args: any) => any ? E[K] : (payload: E[K]) => void;
@@ -101,3 +101,6 @@ export interface SVGAttributesWithMotionValues {
 export type SetMotionValueType<T, Keys extends keyof T> = {
   [K in keyof T]: K extends Keys ? SVGAttributesAsMotionValues : T[K]
 }
+
+type IntrinsicElementAttributesAsMotionValues = SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>
+export type MotionHTMLAttributes<C extends ElementType> = Omit<IntrinsicElementAttributesAsMotionValues[C], keyof Options | 'style' | 'as' | 'asChild'>