fix(component): apply delay to visibility variants (#184)

vueuse · Apr 20, 2024 · 7a77272 · 7a77272
1 parent 05e7251
commit 7a77272
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 35 deletions.
diff --git a/src/components/Motion.ts b/src/components/Motion.ts
@@ -107,9 +107,17 @@ export default defineComponent({
       }
 
       if (props.delay) {
-        config.enter.transition = { ...config.enter.transition } || {}
-        config.enter.transition.delay = parseInt(props.delay as string)
+        const delayNumber = parseInt(props.delay as string)
+
+        // Apply delay to existing variants where applicable
+        for (const configKey of ['enter', 'visible', 'visibleOnce']) {
+          if (!config[configKey]) continue
+
+          config[configKey].transition ??= {}
+          config[configKey].transition.delay = delayNumber
+        }
       }
+
       return config
     })
 

diff --git a/src/utils/directive.ts b/src/utils/directive.ts
@@ -24,50 +24,29 @@ export function resolveVariants<T extends string>(node: VNode<any, HTMLElement |
     }
 
     // Loop on directive prop keys, add them to the local variantsRef if defined
-    directivePropsKeys.forEach((key) => {
-      if (key === 'delay') {
-        if (target && target[key] && typeof target[key] === 'number') {
-          const delay = target[key]
+    for (let key of directivePropsKeys) {
+      if (!target || !target[key]) continue
 
-          if (variantsRef && variantsRef.value) {
-            if (variantsRef.value.enter) {
-              if (!variantsRef.value.enter.transition) variantsRef.value.enter.transition = {}
+      if (key === 'delay' && typeof target[key] === 'number') {
+        // Apply delay to existing variants where applicable
+        for (const variantKey of ['enter', 'visible', 'visibleOnce'] as const) {
+          const variantConfig = variantsRef.value[variantKey]
 
-              variantsRef.value.enter.transition = {
-                delay,
-                ...variantsRef.value.enter.transition,
-              }
-            }
+          if (variantConfig == null) continue
 
-            if (variantsRef.value.visible) {
-              if (!variantsRef.value.visible.transition) variantsRef.value.visible.transition = {}
-
-              variantsRef.value.visible.transition = {
-                delay,
-                ...variantsRef.value.visible.transition,
-              }
-            }
-
-            if (variantsRef.value.visibleOnce) {
-              if (!variantsRef.value.visibleOnce.transition) variantsRef.value.visibleOnce.transition = {}
-
-              variantsRef.value.visibleOnce.transition = {
-                delay,
-                ...variantsRef.value.visibleOnce.transition,
-              }
-            }
-          }
+          variantConfig.transition ??= {}
+          variantConfig.transition.delay = target[key]
         }
 
-        return
+        continue
       }
 
       // @ts-expect-error - Fix errors later for typescript 5
-      if (target && target[key] && isObject(target[key])) {
+      if (isObject(target[key])) {
         const prop = target[key]
         if (key === 'visible-once') key = 'visibleOnce'
         variantsRef.value[key as keyof MotionVariants<T>] = prop
       }
-    })
+    }
   }
 }