fix: transition onComplete triggers after each property animation (#189)

Author: BobbieGoede

src/features/eventListeners.ts

@@ -83,6 +83,8 @@ export function registerEventListeners<T extends string, V extends MotionVariant
     useEventListener(target as any, 'blur', () => (focused.value = false))
   }
 
-  // Watch local computed variant, apply it dynamically
-  watch(computedProperties, apply)
+  // Watch event states, apply it computed properties
+  watch([hovered, tapped, focused], () => {
+    apply(computedProperties.value)
+  })
 }

src/useMotionControls.ts

@@ -46,20 +46,27 @@ export function useMotionControls<T extends string, V extends MotionVariants<T>>
     // If variant is a key, try to resolve it
     if (typeof variant === 'string') variant = getVariantFromKey(variant)
 
-    // Return Promise chain
-    return Promise.all(
-      Object.entries(variant)
-        .map(([key, value]) => {
-          // Skip transition key
-          if (key === 'transition') return undefined
-
-          return new Promise<void>((resolve) =>
-            // @ts-expect-error - Fix errors later for typescript 5
-            push(key as keyof MotionProperties, value, motionProperties, (variant as Variant).transition || getDefaultTransition(key, variant[key]), resolve),
-          )
-        })
-        .filter(Boolean),
-    )
+    // Create promise chain for each animated property
+    const animations = Object.entries(variant)
+      .map(([key, value]) => {
+        // Skip transition key
+        if (key === 'transition') return undefined
+
+        return new Promise<void>((resolve) =>
+          // @ts-expect-error - Fix errors later for typescript 5
+          push(key as keyof MotionProperties, value, motionProperties, (variant as Variant).transition || getDefaultTransition(key, variant[key]), resolve),
+        )
+      })
+      .filter(Boolean)
+
+    // Call `onComplete` after all animations have completed
+    async function waitForComplete() {
+      await Promise.all(animations)
+      ;(variant as Variant).transition?.onComplete?.()
+    }
+
+    // Return using `Promise.all` to preserve type compatibility
+    return Promise.all([waitForComplete()])
   }
 
   const set = (variant: Variant | keyof V) => {

src/utils/transition.ts

@@ -221,8 +221,6 @@ export function getAnimation(key: string, value: MotionValue, target: ResolvedVa
             if (valueTransition.onUpdate) valueTransition.onUpdate(v)
           },
           onComplete: () => {
-            if (transition.onComplete) transition.onComplete()
-
             if (onComplete) onComplete()
 
             if (complete) complete()
@@ -236,8 +234,6 @@ export function getAnimation(key: string, value: MotionValue, target: ResolvedVa
   function set(complete?: () => void): StopAnimation {
     value.set(target)
 
-    if (transition.onComplete) transition.onComplete()
-
     if (onComplete) onComplete()
 
     if (complete) complete()

tests/components.spec.ts

@@ -1,21 +1,9 @@
 import { config, mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { h, nextTick } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
 import { MotionPlugin } from '../src'
-import { MotionComponent } from '../src/components'
-
-function useCompletionFn() {
-  return vi.fn(() => {})
-}
-
-// Get component using either `v-motion` directive or `<Motion>` component
-function getTestComponent(t: string) {
-  if (t === 'directive') {
-    return { template: `<div v-motion>Hello world</div>` }
-  }
-
-  return { render: () => h(MotionComponent) }
-}
+import { intersect } from './utils/intersectionObserver'
+import { getTestComponent, useCompletionFn, waitForMockCalls } from './utils'
 
 // Register plugin
 config.global.plugins.push(MotionPlugin)
@@ -33,6 +21,7 @@ describe.each([
       props: {
         initial: { opacity: 0, x: -100 },
         enter: { opacity: 1, x: 0, transition: { onComplete } },
+        duration: 10,
       },
     })
 
@@ -43,21 +32,21 @@ describe.each([
     expect(el.style.opacity).toEqual('0')
     expect(el.style.transform).toEqual('translate3d(-100px,0px,0px)')
 
-    await vi.waitUntil(() => onComplete.mock.calls.length === 2)
+    await waitForMockCalls(onComplete)
 
     // Renders enter variant
     expect(el.style.opacity).toEqual('1')
     expect(el.style.transform).toEqual('translateZ(0px)')
   })
 
-  // TODO: not sure intersection observer works using `happy-dom`
-  it.todo('Visibility variants', async () => {
+  it('Visibility variants', async () => {
     const onComplete = useCompletionFn()
 
     const wrapper = mount(TestComponent, {
       props: {
-        initial: { color: 'red', y: 100 },
+        initial: { color: 'red', y: 100, transition: { onComplete } },
         visible: { color: 'green', y: 0, transition: { onComplete } },
+        duration: 10,
       },
     })
 
@@ -67,10 +56,19 @@ describe.each([
     expect(el.style.color).toEqual('red')
     expect(el.style.transform).toEqual('translate3d(0px,100px,0px)')
 
-    await vi.waitUntil(() => onComplete.mock.calls.length === 2)
+    // Trigger mock intersection
+    intersect(el, true)
+    await waitForMockCalls(onComplete)
 
     expect(el.style.color).toEqual('green')
-    expect(el.style.transform).toEqual('translate3d(0px,0px,0px)')
+    expect(el.style.transform).toEqual('translateZ(0px)')
+
+    // Trigger mock intersection
+    intersect(el, false)
+    await waitForMockCalls(onComplete)
+
+    expect(el.style.color).toEqual('red')
+    expect(el.style.transform).toEqual('translate3d(0px,100px,0px)')
   })
 
   it('Event variants', async () => {
@@ -82,7 +80,7 @@ describe.each([
         hovered: { scale: 1.2, transition: { onComplete } },
         tapped: { scale: 1.5, transition: { onComplete } },
         focused: { scale: 2, transition: { onComplete } },
-        duration: 50,
+        duration: 10,
       },
     })
 
@@ -94,37 +92,37 @@ describe.each([
 
     // Trigger hovered
     await wrapper.trigger('mouseenter')
-    await vi.waitUntil(() => onComplete.mock.calls.length === 1)
+    await waitForMockCalls(onComplete)
 
     expect(el.style.transform).toEqual('scale(1.2) translateZ(0px)')
 
     // Trigger tapped
     await wrapper.trigger('mousedown')
-    await vi.waitUntil(() => onComplete.mock.calls.length === 2)
+    await waitForMockCalls(onComplete)
 
     expect(el.style.transform).toEqual('scale(1.5) translateZ(0px)')
 
     // Trigger focus
     await wrapper.trigger('focus')
-    await vi.waitUntil(() => onComplete.mock.calls.length === 3)
+    await waitForMockCalls(onComplete)
 
     expect(el.style.transform).toEqual('scale(2) translateZ(0px)')
 
     // Should return to tapped
     await wrapper.trigger('blur')
-    await vi.waitUntil(() => onComplete.mock.calls.length === 4)
+    await waitForMockCalls(onComplete)
 
     expect(el.style.transform).toEqual('scale(1.5) translateZ(0px)')
 
     // Should return to hovered
     await wrapper.trigger('mouseup')
-    await vi.waitUntil(() => onComplete.mock.calls.length === 5)
+    await waitForMockCalls(onComplete)
 
     expect(el.style.transform).toEqual('scale(1.2) translateZ(0px)')
 
     // Should return to initial
     await wrapper.trigger('mouseleave')
-    await vi.waitUntil(() => onComplete.mock.calls.length === 6)
+    await waitForMockCalls(onComplete)
 
     expect(el.style.transform).toEqual('scale(1) translateZ(0px)')
   })

tests/utils/index.ts

@@ -0,0 +1,34 @@
+import { type Mock, vi } from 'vitest'
+import { h } from 'vue'
+import { MotionComponent } from '../../src/components'
+
+export function useCompletionFn() {
+  return vi.fn(() => {})
+}
+
+// Get component using either `v-motion` directive or `<Motion>` component
+export function getTestComponent(t: string) {
+  if (t === 'directive') {
+    return { template: `<div v-motion>Hello world</div>` }
+  }
+
+  return { render: () => h(MotionComponent) }
+}
+
+// Waits until mock has been called and resets the call count
+export async function waitForMockCalls(fn: Mock, calls = 1, options: Parameters<typeof vi.waitUntil>['1'] = { interval: 10 }) {
+  try {
+    await vi.waitUntil(() => fn.mock.calls.length === calls, options)
+    fn.mockReset()
+  } catch (err) {
+    // This ensures the vitest error log shows where this helper is called instead of the helper internals
+    if (err instanceof Error) {
+      err.message += ` Waited for ${calls} call(s) but failed at ${fn.mock.calls.length} call(s).`
+
+      const arr = err.stack?.split('\n')
+      arr?.splice(0, 3)
+      err.stack = arr?.join('\n') ?? undefined
+    }
+    throw err
+  }
+}

tests/utils/intersectionObserver.ts

@@ -0,0 +1,51 @@
+// adapted from https://github.com/thebuilder/react-intersection-observer/blob/d35365990136bfbc99ce112270e5ff232cf45f7f/src/test-helper.ts
+// and https://jaketrent.com/post/test-intersection-observer-react/
+import { afterEach, beforeEach, vi } from 'vitest'
+
+const observerMap = new Map()
+const instanceMap = new Map()
+
+beforeEach(() => {
+  // @ts-expect-error mocked
+  window.IntersectionObserver = vi.fn((cb, options = {}) => {
+    const instance = {
+      thresholds: Array.isArray(options.threshold) ? options.threshold : [options.threshold],
+      root: options.root,
+      rootMargin: options.rootMargin,
+      observe: vi.fn((element: Element) => {
+        instanceMap.set(element, instance)
+        observerMap.set(element, cb)
+      }),
+      unobserve: vi.fn((element: Element) => {
+        instanceMap.delete(element)
+        observerMap.delete(element)
+      }),
+      disconnect: vi.fn(),
+    }
+    return instance
+  })
+})
+
+afterEach(() => {
+  // @ts-expect-error mocked
+  window.IntersectionObserver.mockReset()
+  instanceMap.clear()
+  observerMap.clear()
+})
+
+export function intersect(element: Element, isIntersecting: boolean) {
+  const cb = observerMap.get(element)
+  if (cb) {
+    cb([
+      {
+        isIntersecting,
+        target: element,
+        intersectionRatio: isIntersecting ? 1 : -1,
+      },
+    ])
+  }
+}
+
+export function getObserverOf(element: Element): IntersectionObserver {
+  return instanceMap.get(element)
+}