animationを付与

k35o · Sep 21, 2024 · 7c4cb54 · 7c4cb54
1 parent 977fbeb
commit 7c4cb54
Showing 1 changed file with 48 additions and 21 deletions.
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -33,6 +33,7 @@ import {
  useMenuTrigger,
 } from './hooks';
 import clsx from 'clsx';
+import { AnimatePresence, motion, Variants } from 'framer-motion';
 
 const Root: FC<PropsWithChildren<{ placement?: Placement }>> = ({
  children,
@@ -57,6 +58,7 @@ const Root: FC<PropsWithChildren<{ placement?: Placement }>> = ({
  padding: 8,
  }),
  ],
+ transform: false,
  });
 
  const listNavigation = useListNavigation(context, {
@@ -119,6 +121,22 @@ const Root: FC<PropsWithChildren<{ placement?: Placement }>> = ({
  );
 };
 
+const contentMotionVariants = {
+ closed: {
+ scale: 0,
+ transition: {
+ delay: 0.15,
+ },
+ },
+ open: {
+ scale: 1,
+ transition: {
+ type: 'spring',
+ duration: 0.2,
+ },
+ },
+} satisfies Variants;
+
 const Content: FC<PropsWithChildren> = ({ children }) => {
  const {
  id,
@@ -133,28 +151,37 @@ const Content: FC<PropsWithChildren> = ({ children }) => {
 
  return (
  <FloatingList elementsRef={itemElementsRef}>
- {isOpen && (
- <FloatingPortal>
- <FloatingFocusManager context={context} modal={false}>
- <div
- ref={setContentRef}
- style={contentStyles}
- {...contentProps}
- >
- <section
- ref={ref}
- id={id}
- role="menu"
- aria-orientation="vertical"
- className="flex min-w-40 flex-col rounded-xl border border-borderSecondary bg-bgBase py-2 shadow-xl"
- tabIndex={-1}
+ <AnimatePresence>
+ {isOpen && (
+ <FloatingPortal>
+ <FloatingFocusManager context={context} modal={false}>
+ <div
+ ref={setContentRef}
+ style={contentStyles}
+ {...contentProps}
  >
- {children}
- </section>
- </div>
- </FloatingFocusManager>
- </FloatingPortal>
- )}
+ <motion.div
+ animate={isOpen ? 'open' : 'closed'}
+ initial="closed"
+ exit="closed"
+ variants={contentMotionVariants}
+ >
+ <section
+ ref={ref}
+ id={id}
+ role="menu"
+ aria-orientation="vertical"
+ className="flex min-w-40 flex-col rounded-xl border border-borderSecondary bg-bgBase py-2 shadow-xl"
+ tabIndex={-1}
+ >
+ {children}
+ </section>
+ </motion.div>
+ </div>
+ </FloatingFocusManager>
+ </FloatingPortal>
+ )}
+ </AnimatePresence>
  </FloatingList>
  );
 };