From 012b078ceef058146c1d1266dc793f9018831a28 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sun, 3 Nov 2024 18:09:42 +0800
Subject: [PATCH] anim: adjust speed for grow and shrink

---
 src/platform/anim.ts | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/platform/anim.ts b/src/platform/anim.ts
index 3369e09..dfffc87 100644
--- a/src/platform/anim.ts
+++ b/src/platform/anim.ts
@@ -49,7 +49,7 @@ export function useHeroSignal(
 
     return [get, set];
   } else {
-    console.debug("no hero source")
+    console.debug("no hero source");
     return [() => undefined, () => undefined];
   }
 }
@@ -85,7 +85,6 @@ export function animateRollOutFromTop(
   return animation;
 }
 
-
 export function animateRollInFromBottom(
   root: HTMLElement,
   options?: Omit<KeyframeAnimationOptions, "duration">,
@@ -126,8 +125,10 @@ export function animateGrowFromTopRight(
 
   const { width, height } = root.getBoundingClientRect();
 
-  const durationX = Math.floor((height / 1600) * 1000);
-  const durationY = Math.floor((width / 1600) * 1000);
+  const speed = transitionSpeedForEnter(window.innerHeight);
+
+  const durationX = Math.floor(height / speed);
+  const durationY = Math.floor(width / speed);
 
   // finds the offset for the center frame,
   // it will stops at the (minDuration / maxDuration)%
@@ -137,20 +138,19 @@ export function animateGrowFromTopRight(
   const centerOffset = minDuration / maxDuration;
 
   const keyframes = [
-    { transform: "scaleX(0)", opacity: 0, height: "0px", offset: 0 },
+    { transform: "scaleX(0.5)", opacity: 0, height: "0px", offset: 0 },
     {
-      transform: `scaleX(${minDuration === durationX ? "1" : centerOffset})`,
+      transform: `scaleX(${minDuration === durationX ? "1" : centerOffset / 2 + 0.5})`,
       height: `${(minDuration === durationY ? 1 : centerOffset) * height}px`,
       offset: centerOffset,
-      opacity: 1,
     },
-    { transform: "scaleX(1)", height: `${height}px`, offset: 1 },
+    { transform: "scaleX(1)", height: `${height}px`, opacity: 1, offset: 1 },
   ];
 
-  const animation = root.animate(
-    keyframes,
-    { ...options, duration: maxDuration },
-  );
+  const animation = root.animate(keyframes, {
+    ...options,
+    duration: maxDuration,
+  });
 
   const restore = () => {
     root.style.transformOrigin = transformOrigin;
@@ -173,9 +173,9 @@ export function animateShrinkToTopRight(
 
   const { width, height } = root.getBoundingClientRect();
 
-  const duration = Math.floor(
-    Math.max((width / 1600) * 1000, (height / 1600) * 1000),
-  );
+  const speed = transitionSpeedForLeave(window.innerWidth);
+
+  const duration = Math.floor(Math.max(width / speed, height / speed));
 
   const animation = root.animate(
     {