feat: character float card animation

Crossbell-Box · Jan 25, 2024 · 4bc7b57 · 4bc7b57
1 parent afe507a
commit 4bc7b57
Showing 1 changed file with 26 additions and 29 deletions.
diff --git a/src/components/common/CharacterFloatCard.tsx b/src/components/common/CharacterFloatCard.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { AnimatePresence, m } from "framer-motion"
 import { useState } from "react"
 
 import {
@@ -12,7 +13,6 @@ import {
   useHover,
   useInteractions,
   useRole,
-  useTransitionStyles,
 } from "@floating-ui/react"
 
 import { CharacterCard } from "~/components/common/CharacterCard"
@@ -28,13 +28,14 @@ export const CharacterFloatCard = ({
 }) => {
   const [open, setOpen] = useState(false)
 
-  const { x, y, refs, strategy, context } = useFloating({
+  const { floatingStyles, refs, context } = useFloating({
     placement: "bottom-start",
     open,
     onOpenChange: setOpen,
     middleware: [offset(5), flip(), shift({ padding: 8 })],
     whileElementsMounted: autoUpdate,
     strategy: "fixed",
+    transform: false,
   })
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
@@ -43,10 +44,6 @@ export const CharacterFloatCard = ({
     useDismiss(context),
   ])
 
-  const { isMounted, styles } = useTransitionStyles(context, {
-    duration: 100,
-  })
-
   const [buttonLoading, setButtonLoading] = useState(false)
 
   return (
@@ -58,29 +55,29 @@ export const CharacterFloatCard = ({
       >
         {children}
       </span>
-      {isMounted && (
-        <Portal>
-          <span
-            ref={refs.setFloating}
-            className={
-              "z-10 block w-80" + (open || buttonLoading ? "" : " hidden")
-            }
-            style={{
-              position: strategy,
-              top: y ?? "0",
-              left: x ?? "0",
-              ...styles,
-            }}
-            {...getFloatingProps()}
-          >
-            <CharacterCard
-              siteId={siteId}
-              open={open}
-              setButtonLoading={setButtonLoading}
-            />
-          </span>
-        </Portal>
-      )}
+      <AnimatePresence>
+        {open && (
+          <Portal>
+            <m.span
+              ref={refs.setFloating}
+              className={
+                "z-10 block w-80" + (open || buttonLoading ? "" : " hidden")
+              }
+              style={floatingStyles}
+              {...getFloatingProps()}
+              initial={{ translateY: "10px", opacity: 0 }}
+              animate={{ translateY: "0px", opacity: 1 }}
+              exit={{ translateY: "10px", opacity: 0 }}
+            >
+              <CharacterCard
+                siteId={siteId}
+                open={open}
+                setButtonLoading={setButtonLoading}
+              />
+            </m.span>
+          </Portal>
+        )}
+      </AnimatePresence>
     </>
   )
 }