fix(Popup): animations playing incorrectly

src/svelte-interface/components/MotionDiv.svelte

@@ -20,21 +20,32 @@
       let finalKeyframe = { ...keyframe };
 
       if (finalKeyframe.height === 'auto') {
-        divElement.style.visibility = 'hidden';
+        const prevHeight = divElement.style.height;
-        divElement.style.height = 'auto';
+        const prevVisibility = divElement.style.visibility;
-        const height = divElement.offsetHeight;
-        divElement.style.height = divElement.style.height || '0px';
-        divElement.style.visibility = '';
         
-        finalKeyframe.height = `${height}px`;
+        divElement.style.height = 'auto';
+        divElement.style.visibility = 'hidden';
+        divElement.style.position = 'absolute';
+        
+        const autoHeight = divElement.offsetHeight;
+        
+        divElement.style.height = prevHeight;
+        divElement.style.visibility = prevVisibility;
+        divElement.style.position = '';
+        
+        finalKeyframe.height = `${autoHeight}px`;
       }
 
       if (!transition || transition.type === 'spring') {
+        const springConfig = transition?.config || { stiffness: 250, damping: 25 };
         animationOptions = {
-          easing: spring(transition || { stiffness: 250, damping: 25 }),
+          ...transition,
+          easing: spring(springConfig)
         };
       }
 
+      console.log(keyframe)
+
       const animation = motionAnimate(divElement, finalKeyframe, animationOptions);
       return animation.finished;
     }

src/svelte-interface/pages/settings/shortcuts.svelte

@@ -81,14 +81,17 @@
         initial={{ opacity: 0, height: 0 }}
         animate={isFormVisible ? { opacity: 1, height: 'auto' } : { opacity: 0, height: 0 }}
         exit={{ opacity: 0, height: 0 }}
-        transition={{ duration: 0.3 }}
+        transition={{
+          type: 'spring',
+          config: { stiffness: 400, damping: 25 }
+        }}
       >
         {#if isFormVisible}
           <div class="flex flex-col items-center">
             <MotionDiv
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1, duration: 0.5 }}
+              transition={{ delay: 0, duration: 0.2 }}
               class="w-full"
             >
               <input
@@ -101,7 +104,7 @@
             <MotionDiv
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.2, duration: 0.5 }}
+              transition={{ delay: 0.05, duration: 0.2 }}
               class="w-full"
             >
               <input