BottomSheet: backward animation

src/material/BottomSheet.module.css

@@ -11,10 +11,14 @@
   border-radius: 2px;
   overscroll-behavior: contain;
 
+  &::backdrop {
+    background-color: black;
+    opacity: 0.5;
+  }
+
   box-shadow: var(--tutu-shadow-e16);
 
   :global(.MuiToolbar-root) > :global(.MuiButtonBase-root):first-child {
-    color: white;
     margin-left: -0.5em;
     margin-right: 24px;
   }

src/material/BottomSheet.tsx

@@ -3,6 +3,8 @@ import {
   createRenderEffect,
   onCleanup,
   onMount,
+  startTransition,
+  useTransition,
   type ParentComponent,
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
@@ -14,17 +16,21 @@ export type BottomSheetProps = {
 
 export const HERO = Symbol("BottomSheet Hero Symbol");
 
-function composeAnimationFrame({
-  top,
-  left,
-  height,
-  width,
-}: Record<"top" | "left" | "height" | "width", number>) {
+function composeAnimationFrame(
+  {
+    top,
+    left,
+    height,
+    width,
+  }: Record<"top" | "left" | "height" | "width", number>,
+  x: Record<string, unknown>,
+) {
   return {
     top: `${top}px`,
     left: `${left}px`,
     height: `${height}px`,
     width: `${width}px`,
+    ...x,
   };
 }
 
@@ -35,30 +41,50 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let animation: Animation | undefined;
   const hero = useHeroSignal(HERO);
 
+  const [pending] = useTransition()
+
   createEffect(() => {
     if (props.open) {
-      if (!element.open) {
-        element.showModal();
-        animateOpen();
+      if (!element.open && !pending()) {
+        animatedOpen();
       }
     } else {
       if (element.open) {
-        if (animation) {
-          animation.cancel();
-        }
-        element.close();
+        animatedClose();
       }
     }
   });
 
-  const animateOpen = () => {
-    // Do hero animation
+  const animatedClose = () => {
+    const endRect = hero();
+    if (endRect) {
+      const startRect = element.getBoundingClientRect();
+      const animation = animateHero(startRect, endRect, element, true);
+      const onClose = () => {
+        element.close();
+      };
+      animation.addEventListener("finish", onClose);
+      animation.addEventListener("cancel", onClose);
+    } else {
+      element.close();
+    }
+  };
+
+  const animatedOpen = () => {
+    element.showModal();
     const startRect = hero();
-    console.debug("capture hero source", startRect);
     if (!startRect) return;
     const endRect = element.getBoundingClientRect();
-    const easing = "ease-in-out";
-    console.debug("easing", easing);
+    animateHero(startRect, endRect, element);
+  };
+
+  const animateHero = (
+    startRect: DOMRect,
+    endRect: DOMRect,
+    element: HTMLElement,
+    reserve?: boolean,
+  ) => {
+    const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
     element.classList.add(styles.animated);
     const distance = Math.sqrt(
       Math.pow(Math.abs(startRect.top - endRect.top), 2) +
@@ -66,7 +92,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     );
     const duration = (distance / MOVE_SPEED) * 1000;
     animation = element.animate(
-      [composeAnimationFrame(startRect), composeAnimationFrame(endRect)],
+      [
+        composeAnimationFrame(startRect, { opacity: reserve ? 1 : 0.5 }),
+        composeAnimationFrame(endRect, { opacity: reserve ? 0.5 : 1 }),
+      ],
       { easing, duration },
     );
     const onAnimationEnd = () => {
@@ -75,6 +104,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     };
     animation.addEventListener("finish", onAnimationEnd);
     animation.addEventListener("cancel", onAnimationEnd);
+    return animation;
   };
 
   onCleanup(() => {