feat: adds component support to useAutoAnimate for Vue

Author: justin-schroeder

playwright-report/index.html

@@ -168,16 +168,11 @@ function observePosition(el: Element) {
 /**
  * Update the exact position of a given element.
  * @param el - An element to update the position of.
- * @param debounce - Whether or not to debounce the update. After an animation is finished, it should update as soon as possible to prevent flickering on quick toggles.
  */
-function updatePos(el: Element, debounce = true) {
+function updatePos(el: Element) {
   clearTimeout(debounces.get(el))
   const optionsOrPlugin = getOptions(el)
-  const delay = debounce
-    ? isPlugin(optionsOrPlugin)
-      ? 500
-      : optionsOrPlugin.duration
-    : 0
+  const delay = isPlugin(optionsOrPlugin) ? 500 : optionsOrPlugin.duration
   debounces.set(
     el,
     setTimeout(async () => {
@@ -351,8 +346,7 @@ function animate(el: Element) {
   const isMounted = el.isConnected
   const preExisting = coords.has(el)
   if (isMounted && siblings.has(el)) siblings.delete(el)
-
-  if (animations.get(el)?.playState !== "finished") {
+  if (animations.has(el)) {
     animations.get(el)?.cancel()
   }
   if (NEW in el) {
@@ -529,24 +523,15 @@ function remain(el: Element) {
   if (!oldCoords) return
   const pluginOrOptions = getOptions(el)
   if (typeof pluginOrOptions !== "function") {
-    let deltaLeft = oldCoords.left - newCoords.left
-    let deltaTop = oldCoords.top - newCoords.top
-    const deltaRight =
-      oldCoords.left + oldCoords.width - (newCoords.left + newCoords.width)
-    const deltaBottom =
-      oldCoords.top + oldCoords.height - (newCoords.top + newCoords.height)
-
-    // element is probably anchored and doesn't need to be offset
-    if (deltaBottom == 0) deltaTop = 0
-    if (deltaRight == 0) deltaLeft = 0
-
+    const deltaX = oldCoords.left - newCoords.left
+    const deltaY = oldCoords.top - newCoords.top
     const [widthFrom, widthTo, heightFrom, heightTo] = getTransitionSizes(
       el,
       oldCoords,
       newCoords,
     )
     const start: Record<string, any> = {
-      transform: `translate(${deltaLeft}px, ${deltaTop}px)`,
+      transform: `translate(${deltaX}px, ${deltaY}px)`,
     }
     const end: Record<string, any> = {
       transform: `translate(0, 0)`,
@@ -572,9 +557,7 @@ function remain(el: Element) {
   }
   animations.set(el, animation)
   coords.set(el, newCoords)
-  animation.addEventListener("finish", updatePos.bind(null, el, false), {
-    once: true,
-  })
+  animation.addEventListener("finish", () => updatePos(el), { once: true })
 }
 
 /**
@@ -606,9 +589,7 @@ function add(el: Element) {
     animation.play()
   }
   animations.set(el, animation)
-  animation.addEventListener("finish", updatePos.bind(null, el, false), {
-    once: true,
-  })
+  animation.addEventListener("finish", () => updatePos(el), { once: true })
 }
 
 /**
@@ -798,11 +779,7 @@ function deletePosition(
   }
   if (!offsetParent) offsetParent = document.body
   const parentStyles = getComputedStyle(offsetParent)
-  const parentCoords =
-    !animations.has(el) || animations.get(el)?.playState === "finished"
-      ? getCoords(offsetParent)
-      : coords.get(offsetParent)!
-
+  const parentCoords = coords.get(offsetParent) || getCoords(offsetParent)
   const top =
     Math.round(oldCoords.top - parentCoords.top) -
     raw(parentStyles.borderTopWidth)

src/index.ts

@@ -1,5 +1,5 @@
 import { ref, onMounted, watchEffect, Plugin, Ref, onBeforeUnmount } from "vue"
-import type { Directive } from "vue"
+import type { Component, Directive } from "vue"
 import autoAnimate, {
   vAutoAnimate as autoAnimateDirective,
   AutoAnimateOptions,
@@ -8,10 +8,10 @@ import autoAnimate, {
 } from "../index"
 
 export const vAutoAnimate: Directive<
-  HTMLElement,
+  HTMLElement | Component,
   Partial<AutoAnimateOptions>
 > = autoAnimateDirective as unknown as Directive<
-  HTMLElement,
+  HTMLElement | Component,
   Partial<AutoAnimateOptions>
 >
 
@@ -27,8 +27,8 @@ export const autoAnimatePlugin: Plugin = {
  * @returns A template ref. Use the `ref` attribute of your parent element
  * to store the element in this template ref.
  */
-export function useAutoAnimate<T extends Element>(
-  options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin
+export function useAutoAnimate<T extends Element | Component>(
+  options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin,
 ): [Ref<T>, (enabled: boolean) => void] {
   const element = ref<T>()
   let controller: AnimationController | undefined
@@ -39,9 +39,19 @@ export function useAutoAnimate<T extends Element>(
   }
   onMounted(() => {
     watchEffect(() => {
-      const el = element.value?.$el || element.value
-      if (el instanceof HTMLElement)
+      let el: HTMLElement | undefined
+      if (element.value instanceof HTMLElement) {
+        el = element.value
+      } else if (
+        element.value &&
+        "$el" in element.value &&
+        element.value.$el instanceof HTMLElement
+      ) {
+        el = element.value.$el
+      }
+      if (el) {
         controller = autoAnimate(el, options || {})
+      }
     })
   })
   onBeforeUnmount(() => {