From 9dfcfa3868bebfa23c4766a69818761680711494 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 16 Nov 2024 21:50:18 +0800
Subject: [PATCH] StackedRouter: add default open animation

---
 src/platform/StackedRouter.tsx | 46 +++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx
index 8d489ae..25dd6e6 100644
--- a/src/platform/StackedRouter.tsx
+++ b/src/platform/StackedRouter.tsx
@@ -15,7 +15,7 @@ import {
 import { createStore, unwrap } from "solid-js/store";
 import { insert, render } from "solid-js/web";
 import "./StackedRouter.css";
-import { animateSlideInFromRight } from "./anim";
+import { animateSlideInFromRight, animateSlideOutToRight } from "./anim";
 import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "../material/theme";
 
 export type StackedRouterProps = Omit<RouterProps, "url">;
@@ -102,6 +102,32 @@ function onDialogClick(
   }
 }
 
+function animateClose(element: HTMLElement) {
+  if (window.innerWidth <= 560) {
+    return animateSlideOutToRight(element, { easing: ANIM_CURVE_DECELERATION });
+  } else {
+    return element.animate(
+      {
+        opacity: [0.5, 0],
+      },
+      { easing: ANIM_CURVE_STD, duration: 220 },
+    );
+  }
+}
+
+function animateOpen(element: HTMLElement) {
+  if (window.innerWidth <= 560) {
+    animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION });
+  } else {
+    element.animate(
+      {
+        opacity: [0.5, 1],
+      },
+      { easing: ANIM_CURVE_STD, duration: 220 },
+    );
+  }
+}
+
 /**
  * The router that stacks the pages.
  */
@@ -130,12 +156,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
         const lastFrame = stack[stack.length - 1];
         const element = document.getElementById(lastFrame.rootId)!;
         requestAnimationFrame(() => {
-          const animation = element.animate(
-            {
-              opacity: [0.5, 0],
-            },
-            { easing: ANIM_CURVE_STD, duration: 220 },
-          );
+          const animation = animateClose(element);
           animation.addEventListener("finish", () =>
             mutStack((o) => o.toSpliced(o.length - depth, depth)),
           );
@@ -162,16 +183,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
     createEffect(() => {
       requestAnimationFrame(() => {
         element.showModal();
-        if (window.innerWidth <= 560) {
-          animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION });
-        } else {
-          element.animate(
-            {
-              opacity: [0.5, 1],
-            },
-            { easing: ANIM_CURVE_STD, duration: 220 },
-          );
-        }
+        animateOpen(element);
       });
     });
   };