BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(Popup): animations playing incorrectly

Browse Source
This commit is contained in:
sethburkart123
2024-11-01 17:13:01 +11:00
parent 1a17f91f10
commit f8caf9cb35
2 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/svelte-interface/components/MotionDiv.svelte
+18 -7
View File
@@ -20,21 +20,32 @@
let finalKeyframe = { ...keyframe };
if (finalKeyframe.height === 'auto') {
divElement.style.visibility = 'hidden';
divElement.style.height = 'auto';
const height = divElement.offsetHeight;
divElement.style.height = divElement.style.height || '0px';
divElement.style.visibility = '';
const prevHeight = divElement.style.height;
const prevVisibility = 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
+6 -3
View File
@@ -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