Menu: improve animation for top-right

src/material/Menu.tsx

@@ -8,6 +8,10 @@ import {
 } from "solid-js";
 import { ANIM_CURVE_STD } from "./theme";
 import "./Menu.css";
+import {
+  animateGrowFromTopRight,
+  animateShrinkToTopRight,
+} from "../platform/anim";
 
 type Props = {
   open?: boolean;
@@ -51,23 +55,7 @@ const Menu: ParentComponent<Props> = (props) => {
             top,
           });
 
-          const overflow = root.style.overflow;
-          root.style.overflow = "hidden";
-          const duration = (rend.height / 1600) * 1000;
-          const easing = ANIM_CURVE_STD;
-          const animation = root.animate(
-            {
-              height: [`${rend.height / 2}px`, `${rend.height}px`],
-            },
-            {
-              duration,
-              easing,
-            },
-          );
-          animation.addEventListener(
-            "finish",
-            () => (root.style.overflow = overflow),
-          );
+          animateGrowFromTopRight(root, { easing: ANIM_CURVE_STD });
         } else {
           openAnimationOrigin = "lt";
           setAnchorPos({ left, top });
@@ -119,19 +107,10 @@ const Menu: ParentComponent<Props> = (props) => {
         root.close();
       });
     } else {
-      const overflow = root.style.overflow;
-      root.style.overflow = "hidden";
-      const animation = root.animate(
-        {
-          height: [`${rend.height}px`, `${rend.height / 2}px`],
-        },
-        {
-          duration: (rend.height / 2 / 1600) * 1000,
-          easing: ANIM_CURVE_STD,
-        },
-      );
+      const animation = animateShrinkToTopRight(root, {
+        easing: ANIM_CURVE_STD,
+      });
       animation.addEventListener("finish", () => {
-        root.style.overflow = overflow;
         root.close();
       });
     }

src/material/theme.css

@@ -117,6 +117,7 @@
   --tutu-shadow-e24: 0px 24px 48px 0px var(--tutu-color-shadow-l2);
 
 
+  /* curves are also hard-coded in theme.ts */
   --tutu-anim-curve-std: cubic-bezier(0.4, 0, 0.2, 1);
   --tutu-anim-curve-deceleration: cubic-bezier(0, 0, 0.2, 1);
   --tutu-anim-curve-aceleration: cubic-bezier(0.4, 0, 1, 1);