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

BottomSheet: improve hero animation

Browse source
This commit is contained in:
thislight 2024-10-09 17:33:27 +08:00
parent 71434e5293
commit 15e2bf3304
5 changed files with 11 additions and 9 deletions
Show stats 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 = () => { const onClose = () => {
hero()!.style.visibility = 'unset'
element.close(); element.close();
setHero(); setHero();
}; };
const animatedClose = () => { const animatedClose = () => {
const endRect = hero(); const srcElement = hero()
const endRect = srcElement?.getBoundingClientRect();
if (endRect) { if (endRect) {
const startRect = element.getBoundingClientRect(); const startRect = element.getBoundingClientRect();
const animation = animateHero(startRect, endRect, element, true); const animation = animateHero(startRect, endRect, element, true);
@ -81,8 +83,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const animatedOpen = () => { const animatedOpen = () => {
element.showModal(); element.showModal();
const startRect = hero(); const srcElement = hero()
const startRect = srcElement?.getBoundingClientRect();
if (!startRect) return; if (!startRect) return;
srcElement!.style.visibility = 'hidden'
const endRect = element.getBoundingClientRect(); const endRect = element.getBoundingClientRect();
animateHero(startRect, endRect, element); animateHero(startRect, endRect, element);
}; };

2
src/material/Img.tsx
View file

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

6
src/platform/anim.ts
View file

@ -9,7 +9,7 @@ import {
} from "solid-js"; } from "solid-js";
export type HeroSource = { export type HeroSource = {
[key: string | symbol | number]: DOMRect | undefined; [key: string | symbol | number]: HTMLElement | undefined;
}; };
const HeroSourceContext = createContext<Signal<HeroSource>>( const HeroSourceContext = createContext<Signal<HeroSource>>(
@ -27,10 +27,10 @@ function useHeroSource() {
*/ */
export function useHeroSignal( export function useHeroSignal(
key: string | symbol | number, key: string | symbol | number,
): Signal<DOMRect | undefined> { ): Signal<HTMLElement | undefined> {
const source = useHeroSource(); const source = useHeroSource();
if (source) { if (source) {
const [get, set] = createSignal<DOMRect>(); const [get, set] = createSignal<HTMLElement>();
createRenderEffect(() => { createRenderEffect(() => {
const value = source[0](); const value = source[0]();

3
src/timelines/Home.tsx
View file

@ -340,8 +340,7 @@ const Home: ParentComponent = (props) => {
console.warn("no account info?"); console.warn("no account info?");
return; return;
} }
const rect = srcElement?.getBoundingClientRect(); setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: srcElement }));
setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
const acct = `${inf.username}@${p.account.site}`; const acct = `${inf.username}@${p.account.site}`;
setTootBottomSheetCache(acct, toot); setTootBottomSheetCache(acct, toot);
navigate(`/${encodeURIComponent(acct)}/${toot.id}`, { navigate(`/${encodeURIComponent(acct)}/${toot.id}`, {

1
src/timelines/TootComposer.tsx
View file

@ -185,7 +185,6 @@ function randomChoose<T extends any[]>(
K: T, K: T,
): T extends Array<infer E> ? E : never { ): T extends Array<infer E> ? E : never {
const idx = Math.floor(rn * K.length); const idx = Math.floor(rn * K.length);
console.log(idx, K.length);
return K[idx]; return K[idx];
} }