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

BottomSheet: improve hero animation

Browse source
This commit is contained in:
thislight 2024-10-09 17:33:27 +08:00
parent 70649e97e6
commit bcfb846115
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
5 changed files with 11 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/material/BottomSheet.tsx
View file

@ -62,12 +62,14 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
});
const onClose = () => {
hero()!.style.visibility = 'unset'
element.close();
setHero();
};
const animatedClose = () => {
const endRect = hero();
const srcElement = hero()
const endRect = srcElement?.getBoundingClientRect();
if (endRect) {
const startRect = element.getBoundingClientRect();
const animation = animateHero(startRect, endRect, element, true);
@ -81,8 +83,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const animatedOpen = () => {
element.showModal();
const startRect = hero();
const srcElement = hero()
const startRect = srcElement?.getBoundingClientRect();
if (!startRect) return;
srcElement!.style.visibility = 'hidden'
const endRect = element.getBoundingClientRect();
animateHero(startRect, endRect, element);
};

2
src/material/Img.tsx
View file

@ -44,7 +44,7 @@ const Img: Component<ImgProps> = (props) => {
object-position: center;
width: 100%;
height: 100%;
visibility: ${isBlurEnabled() ? "hidden" : "visible"};
visibility: ${isBlurEnabled() ? "hidden" : "initial"};
}
}