Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

BottomSheet: fix the animation problem

Browse source
This commit is contained in:
thislight 2024-10-17 20:57:20 +08:00
parent ddd3c99f30
commit 634060ed46
2 changed files with 0 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/material/BottomSheet.module.css
View file

@ -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;
}
}
}

6
src/material/BottomSheet.tsx
View file

@ -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 },
);