fix: return to previous state after hovered event variant (#183)

Author: BobbieGoede

src/features/eventListeners.ts

@@ -12,7 +12,7 @@ export function registerEventListeners<T extends string, V extends MotionVariant
   const focused = ref(false)
 
   const mutableKeys = computed(() => {
-    let result: string[] = []
+    let result: string[] = [...Object.keys(state.value || {})]
 
     if (!_variants) return result
 
@@ -26,7 +26,7 @@ export function registerEventListeners<T extends string, V extends MotionVariant
   })
 
   const computedProperties = computed(() => {
-    const result = {}
+    const result: Partial<V> = {}
 
     Object.assign(result, state.value)
 
@@ -37,7 +37,6 @@ export function registerEventListeners<T extends string, V extends MotionVariant
     if (focused.value && _variants.focused) Object.assign(result, _variants.focused)
 
     for (const key in result) {
-      // @ts-expect-error - Fix errors later for typescript 5
       if (!mutableKeys.value.includes(key)) delete result[key]
     }
 

src/features/lifeCycleHooks.ts

@@ -11,7 +11,14 @@ export function registerLifeCycleHooks<T extends string, V extends MotionVariant
       if (!_variants) return
 
       // Set initial before the element is mounted
-      if (_variants.initial) set('initial')
+      if (_variants.initial) {
+        // Set initial variant properties immediately, skipping transitions
+        set('initial')
+
+        // Set variant to sync `state` which is used to undo event variant transitions
+        // NOTE: This triggers an (instant) animation even though properties have already been applied
+        variant.value = 'initial'
+      }
 
       // Lifecycle hooks bindings
       if (_variants.enter) variant.value = 'enter'