Rubicon/tutu
1
0
Fork 0
Code Issues 13 Pull requests Projects 2 Releases Activity Actions

BottomSheet: fix the animation problem

Browse source
This commit is contained in:
thislight 2024-10-17 20:57:20 +08:00
parent b5da86fa5c
commit 040016ddce
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
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 { &.animated {
position: absolute; position: absolute;
transform: translateY(-50%);
overflow: hidden; overflow: hidden;
will-change: width, height, top, left; will-change: width, height, top, left;
@ -54,12 +53,6 @@
& * { & * {
overflow: hidden; overflow: hidden;
} }
@media (max-width: 560px) {
& {
transform: none;
}
}
} }
&.bottom { &.bottom {
@ -71,7 +64,6 @@
& { & {
transform: none; transform: none;
height: unset; height: unset;
} }
} }
} }

6
src/material/BottomSheet.tsx
View file

@ -118,12 +118,9 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
animation = element.animate( animation = element.animate(
{ {
top: [`${rect.top}px`, `${rect.top}px`],
left: reserve left: reserve
? [`${rect.left}px`, `${window.innerWidth}px`] ? [`${rect.left}px`, `${window.innerWidth}px`]
: [`${window.innerWidth}px`, `${rect.left}px`], : [`${window.innerWidth}px`, `${rect.left}px`],
width: [`${rect.width}px`, `${rect.width}px`],
height: [`${rect.height}px`, `${rect.height}px`],
}, },
{ easing, duration }, { easing, duration },
); );
@ -151,12 +148,9 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
animation = element.animate( animation = element.animate(
{ {
left: [`${rect.left}px`, `${rect.left}px`],
top: reserve top: reserve
? [`${rect.top}px`, `${window.innerHeight}px`] ? [`${rect.top}px`, `${window.innerHeight}px`]
: [`${window.innerHeight}px`, `${rect.top}px`], : [`${window.innerHeight}px`, `${rect.top}px`],
width: [`${rect.width}px`, `${rect.width}px`],
height: [`${rect.height}px`, `${rect.height}px`],
}, },
{ easing, duration }, { easing, duration },
); );