From 06764bbb839d152af6a04ad718f03825e8f2ae18 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 5 Dec 2024 06:31:28 +0000
Subject: [PATCH] chore(mobile): optimize swipe dialog animation timeline
 (#9028)

---
 .../mobile/dialogs/setting/swipe-dialog.tsx   | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx b/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx
index 02a3f1649..07f04d15e 100644
--- a/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx
+++ b/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx
@@ -29,21 +29,21 @@ const tick = (
   overlay: HTMLDivElement,
   dialog: HTMLDivElement,
   prev: HTMLElement | null,
-  deltaX: number
+  deltaX: number,
+  fullWidth: number
 ) => {
-  const limitedDeltaX = Math.min(overlay.clientWidth, Math.max(0, deltaX));
-  const percent = limitedDeltaX / overlay.clientWidth;
+  const limitedDeltaX = Math.min(fullWidth, Math.max(0, deltaX));
+  const percent = limitedDeltaX / fullWidth;
   const opacity =
     overlayOpacityRange[1] -
     (overlayOpacityRange[1] - overlayOpacityRange[0]) * percent;
   overlay.style.background = `rgba(0, 0, 0, ${opacity})`;
-  dialog.style.transform = `translateX(${limitedDeltaX}px)`;
+  dialog.style.transform = `translate3d(${limitedDeltaX}px, 0, 0)`;
 
-  const prevEl = prev ?? document.querySelector('#app');
-  if (prevEl) {
+  if (prev) {
     const range = [-80, 0];
     const offset = range[0] + (range[1] - range[0]) * percent;
-    prevEl.style.transform = `translateX(${offset}px)`;
+    prev.style.transform = `translate3d(${offset}px, 0, 0)`;
   }
 };
 const reset = (
@@ -62,16 +62,17 @@ const reset = (
 const getAnimeProxy = (
   overlay: HTMLDivElement,
   dialog: HTMLDivElement,
-  prev: HTMLElement | null,
+  maybePrev: HTMLElement | null,
   init: number
 ) => {
+  const prev = maybePrev ?? document.querySelector('#app');
   return new Proxy(
     { deltaX: init },
     {
       set(target, key, value) {
         if (key === 'deltaX') {
           target.deltaX = value;
-          tick(overlay, dialog, prev, value);
+          tick(overlay, dialog, prev, value, overlay.clientWidth);
           return true;
         }
         return false;
@@ -95,8 +96,8 @@ const cancel = (
       Math.min(overlay.clientWidth, Math.max(0, deltaX))
     ),
     deltaX: 0,
-    easing: 'easeInOutSine',
-    duration: 230,
+    easing: 'cubicBezier(.25,.36,.24,.97)',
+    duration: 320,
     complete: () => {
       complete?.();
       setTimeout(() => {
@@ -121,8 +122,8 @@ const close = (
       Math.min(overlay.clientWidth, Math.max(0, deltaX))
     ),
     deltaX: overlay.clientWidth,
-    easing: 'easeInOutSine',
-    duration: 230,
+    easing: 'cubicBezier(.25,.36,.24,.97)',
+    duration: 320,
     complete: () => {
       complete?.();
       setTimeout(() => {
@@ -178,7 +179,8 @@ export const SwipeDialog = ({
       preventScroll: true,
       onSwipeStart: () => {},
       onSwipe({ deltaX }) {
-        tick(overlay, dialog, prev, deltaX);
+        const prevOrAppRoot = prev ?? document.querySelector('#app');
+        tick(overlay, dialog, prevOrAppRoot, deltaX, overlay.clientWidth);
       },
       onSwipeEnd: ({ deltaX }) => {
         const shouldClose = deltaX > overlay.clientWidth * 0.2;