TootBottomSheet: fix the skipped animation

src/material/BottomSheet.module.css

@@ -44,10 +44,16 @@
   &.animated {
     position: absolute;
     transform: none;
+    overflow: hidden;
+    will-change: width, height, top, left;
 
     &::backdrop {
       opacity: 0;
     }
+
+    & * {
+      overflow: hidden;
+    }
   }
 
   &.bottom {

src/material/BottomSheet.tsx

@@ -55,7 +55,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   createEffect(() => {
     if (props.open) {
       if (!element.open && !pending()) {
-        animatedOpen();
+        requestAnimationFrame(animatedOpen);
         setCache(ochildren());
       }
     } else {
@@ -66,15 +66,16 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
+  const onClose = () => {
+    element.close();
+    setHero();
+  };
+
   const animatedClose = () => {
     const endRect = hero();
     if (endRect) {
       const startRect = element.getBoundingClientRect();
       const animation = animateHero(startRect, endRect, element, true);
-      const onClose = () => {
-        element.close();
-        setHero();
-      };
       animation.addEventListener("finish", onClose);
       animation.addEventListener("cancel", onClose);
     } else {
@@ -126,19 +127,19 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
-  onMount(() => {
-    makeEventListener(element, "click", (event) => {
-      const rect = element.getBoundingClientRect();
-      const isInDialog =
-        rect.top <= event.clientY &&
-        event.clientY <= rect.top + rect.height &&
-        rect.left <= event.clientX &&
-        event.clientX <= rect.left + rect.width;
-      if (!isInDialog) {
-        props.onClose?.("backdrop");
-      }
-    });
-  });
+  const onDialogClick = (
+    event: MouseEvent & { currentTarget: HTMLDialogElement },
+  ) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const isInDialog =
+      rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width;
+    if (!isInDialog) {
+      props.onClose?.("backdrop");
+    }
+  };
 
   return (
     <dialog
@@ -146,6 +147,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
         [styles.bottomSheet]: true,
         [styles.bottom]: props.bottomUp,
       }}
+      onClick={onDialogClick}
       ref={element!}
     >
       {ochildren() ?? cache()}