From 634060ed46303390072de668367317628afc44e1 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Thu, 17 Oct 2024 20:57:20 +0800
Subject: [PATCH] BottomSheet: fix the animation problem

---
 src/material/BottomSheet.module.css | 8 --------
 src/material/BottomSheet.tsx        | 6 ------
 2 files changed, 14 deletions(-)

diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css
index 410858b..154de26 100644
--- a/src/material/BottomSheet.module.css
+++ b/src/material/BottomSheet.module.css
@@ -43,7 +43,6 @@
 
   &.animated {
     position: absolute;
-    transform: translateY(-50%);
     overflow: hidden;
     will-change: width, height, top, left;
 
@@ -54,12 +53,6 @@
     & * {
       overflow: hidden;
     }
-
-    @media (max-width: 560px) {
-      & {
-        transform: none;
-      }
-    }
   }
 
   &.bottom {
@@ -71,7 +64,6 @@
       & {
         transform: none;
         height: unset;
-
       }
     }
   }
diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx
index 747126c..1fab238 100644
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@@ -118,12 +118,9 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
     animation = element.animate(
       {
-        top: [`${rect.top}px`, `${rect.top}px`],
         left: reserve
           ? [`${rect.left}px`, `${window.innerWidth}px`]
           : [`${window.innerWidth}px`, `${rect.left}px`],
-        width: [`${rect.width}px`, `${rect.width}px`],
-        height: [`${rect.height}px`, `${rect.height}px`],
       },
       { easing, duration },
     );
@@ -151,12 +148,9 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
     animation = element.animate(
       {
-        left: [`${rect.left}px`, `${rect.left}px`],
         top: reserve
           ? [`${rect.top}px`, `${window.innerHeight}px`]
           : [`${window.innerHeight}px`, `${rect.top}px`],
-        width: [`${rect.width}px`, `${rect.width}px`],
-        height: [`${rect.height}px`, `${rect.height}px`],
       },
       { easing, duration },
     );