fix: animatePresence custom prop not working

Author: rick-hup

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { Transition, TransitionGroup, computed, onMounted, onUnmounted } from 'vue'
+import { Transition, TransitionGroup, computed, onUnmounted } from 'vue'
 import { mountedStates } from '@/state'
-import { doneCallbacks, provideAnimatePresence, removeDoneCallback } from '@/components/presence'
+import { doneCallbacks, removeDoneCallback } from '@/components/animate-presence/presence'
 import type { AnimatePresenceProps } from './types'
 import { usePopLayout } from './use-pop-layout'
 import { delay } from '@/utils/delay'
+import { useAnimatePresence } from './presence'
 
 defineOptions({
   name: 'AnimatePresence',
@@ -17,15 +18,11 @@ const props = withDefaults(defineProps<AnimatePresenceProps>(), {
   anchorX: 'left',
 })
 
-const presenceContext = {
-  initial: props.initial,
-  custom: props.custom,
-}
-provideAnimatePresence(presenceContext)
+/**
+ * Provide the presence context to the children
+ */
+useAnimatePresence(props)
 
-onMounted(() => {
-  presenceContext.initial = undefined
-})
 const { addPopStyle, removePopStyle, styles } = usePopLayout(props)
 
 function findMotionElement(el: Element): Element | null {

packages/motion/src/components/presence.ts renamed to packages/motion/src/components/animate-presence/presence.ts

@@ -1,4 +1,6 @@
+import type { AnimatePresenceProps } from '@/components/animate-presence/types'
 import { createContext } from '@/utils'
+import { onMounted, watch } from 'vue'
 
 export const doneCallbacks = new WeakMap<Element, (v?: any, safeUnmount?: boolean) => void>()
 
@@ -16,3 +18,21 @@ export interface PresenceContext {
 }
 
 export const [injectAnimatePresence, provideAnimatePresence] = createContext<PresenceContext>('AnimatePresenceContext')
+
+export function useAnimatePresence(props: AnimatePresenceProps) {
+  const presenceContext = {
+    initial: props.initial,
+    custom: props.custom,
+  }
+  watch(() => props.custom, (v) => {
+    presenceContext.custom = v
+  }, {
+    flush: 'pre',
+  })
+
+  provideAnimatePresence(presenceContext)
+
+  onMounted(() => {
+    presenceContext.initial = undefined
+  })
+}

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

@@ -4,7 +4,7 @@ import { useLazyMotionContext } from '@/components/lazy-motion/context'
 import { useMotionConfig } from '@/components/motion-config'
 import type { MotionProps } from '@/components/motion/types'
 import { checkMotionIsHidden } from '@/components/motion/utils'
-import { injectAnimatePresence } from '@/components/presence'
+import { injectAnimatePresence } from '@/components/animate-presence/presence'
 import { MotionState } from '@/state'
 import { convertSvgStyleToAttributes, createStyles } from '@/state/style'
 import type { DOMKeyframesDefinition } from 'framer-motion'

packages/motion/src/features/animation/animation.ts

@@ -208,7 +208,7 @@ export class AnimationFeature extends Feature {
     let variantTransition = this.state.options.transition
     let variant: Variant = {}
     const { variants, custom, transition, animatePresenceContext } = this.state.options
-    const customValue = isDef(custom) ? custom : animatePresenceContext?.custom
+    const customValue = custom ?? animatePresenceContext?.custom
 
     this.state.activeStates = { ...this.state.activeStates, ...controlActiveState }
     STATE_TYPES.forEach((name) => {

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

@@ -4,7 +4,7 @@ import { getClosestProjectingNode } from '@/features/layout/utils'
 import { addScaleCorrector } from 'framer-motion/dist/es/projection/styles/scale-correction.mjs'
 import { defaultScaleCorrector } from '@/features/layout/config'
 import { isHTMLElement } from '@/features/gestures/drag/utils/is'
-import { doneCallbacks } from '@/components/presence'
+import { doneCallbacks } from '@/components/animate-presence/presence'
 
 export class ProjectionFeature extends Feature {
   constructor(state) {

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

@@ -5,8 +5,8 @@ import { cancelFrame, frame, noop } from 'framer-motion/dom'
 import { isAnimateChanged, isSVGElement, resolveVariant } from '@/state/utils'
 import type { Feature, StateType } from '@/features'
 import { FeatureManager } from '@/features'
-import type { PresenceContext } from '@/components/presence'
-import { doneCallbacks } from '@/components/presence'
+import type { PresenceContext } from '@/components/animate-presence/presence'
+import { doneCallbacks } from '@/components/animate-presence/presence'
 import type { AnimateUpdates } from '@/features/animation/types'
 import { isVariantLabels } from '@/state/utils/is-variant-labels'
 import type { LazyMotionContext } from '@/components/lazy-motion/context'
@@ -103,10 +103,11 @@ export class MotionState {
 
   // Initialize animation target values
   private initTarget(initialVariantSource: string[]) {
+    const custom = this.options.custom ?? this.options.animatePresenceContext?.custom
     this.baseTarget = initialVariantSource.reduce((acc, variant) => {
       return {
         ...acc,
-        ...resolveVariant(this.options[variant] || this.context[variant], this.options.variants),
+        ...resolveVariant(this.options[variant] || this.context[variant], this.options.variants, custom),
       }
     }, {})
     this.target = { }

packages/motion/src/state/utils/is-present.ts

@@ -1,4 +1,4 @@
-import { doneCallbacks } from '@/components/presence'
+import { doneCallbacks } from '@/components/animate-presence/presence'
 import type { VisualElement } from 'framer-motion'
 
 export function isPresent(visualElement: VisualElement) {