BottomSheet: improve hero animation

src/material/BottomSheet.tsx

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

src/material/Img.tsx

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

src/platform/anim.ts

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

src/timelines/Home.tsx

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

src/timelines/TootComposer.tsx

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