chore: adding the animation

heroui-inc · Dec 24, 2024 · 42f2ecd · 42f2ecd
1 parent bd9146d
commit 42f2ecd
Showing 1 changed file with 35 additions and 18 deletions.
diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx
@@ -1,6 +1,7 @@
 import {forwardRef} from "@nextui-org/system";
 import {Button, ButtonProps} from "@nextui-org/button";
 import {CloseIcon} from "@nextui-org/shared-icons";
+import {motion, AnimatePresence} from "framer-motion";
 
 import {Progress} from "../../../core/react/src";
 
@@ -27,25 +28,41 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
     ref,
   });
 
+  const toastVariants = {
+    hidden: {opacity: 0, y: 50},
+    visible: {opacity: 1, y: 0},
+    exit: {opacity: 0, y: 50},
+  };
+
   return (
-    <Component ref={domRef} {...getToastProps()}>
-      <main {...getContentProps()}>
-        <Icon {...getIconProps()} />
-        <div>
-          <div {...getTitleProps()}>{props.toast.content.title}</div>
-          <div {...getDescriptionProps()}>{props.toast.content.description}</div>
-        </div>
-      </main>
-      <Button {...(getCloseButtonProps() as ButtonProps)} isIconOnly variant="bordered">
-        <CloseIcon />
-      </Button>
-      {endContent}
-      <Progress
-        {...getProgressBarProps()}
-        aria-label="toast-close-indicator"
-        value={closeProgressBarValue}
-      />
-    </Component>
+    <AnimatePresence>
+      <motion.div
+        animate="visible"
+        exit="exit"
+        initial="hidden"
+        transition={{duration: 0.3}}
+        variants={toastVariants}
+      >
+        <Component ref={domRef} {...getToastProps()}>
+          <main {...getContentProps()}>
+            <Icon {...getIconProps()} />
+            <div>
+              <div {...getTitleProps()}>{props.toast.content.title}</div>
+              <div {...getDescriptionProps()}>{props.toast.content.description}</div>
+            </div>
+          </main>
+          <Button {...(getCloseButtonProps() as ButtonProps)} isIconOnly variant="bordered">
+            <CloseIcon />
+          </Button>
+          {endContent}
+          <Progress
+            {...getProgressBarProps()}
+            aria-label="toast-close-indicator"
+            value={closeProgressBarValue}
+          />
+        </Component>
+      </motion.div>
+    </AnimatePresence>
   );
 });