feat: add enter and exit animation

nhanluongoe · Feb 7, 2024 · 6522ba8 · 6522ba8
1 parent 2ae7542
commit 6522ba8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/components/toast.tsx b/src/components/toast.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import React, { CSSProperties, HTMLAttributes } from 'react';
 import { ReactChildren } from '../core/types';
+import { keyframes } from '@emotion/react';
 
 interface ToastViewportProps {
   position: 'left' | 'center' | 'right';
@@ -51,13 +52,22 @@ function calculatePosition(
 }
 
 interface ToastProps {
+  visible?: boolean;
   collapsed?: string;
   idx?: number;
   style?: CSSProperties;
   className?: string;
   children: ReactChildren;
 }
 
+const fadeOut = keyframes`
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+`;
+const fadeIn = keyframes`
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+`;
 const StyledToast = styled('li')`
   display: flex;
   position: relative;
@@ -71,19 +81,29 @@ const StyledToast = styled('li')`
   line-height: 1.3;
   padding: 16px;
   margin-bottom: 8px;
+  animation: ${(props: ToastProps) => (props.visible ? fadeIn : fadeOut)} 0.4s
+    forwards cubic-bezier(0.06, 0.71, 0.55, 1);
 `;
 
 const Toast: React.FC<ToastProps> = (props) => {
-  const { collapsed, idx, style = {}, children, className = '' } = props;
+  const {
+    collapsed,
+    idx,
+    style = {},
+    children,
+    className = '',
+    visible,
+  } = props;
   const animationStyle = calculateAnimationStyle(idx!, collapsed!);
 
   return (
     <StyledToast
       style={{
-        ...style,
         ...animationStyle,
+        ...style,
       }}
       className={className}
+      visible={visible}
     >
       {children}
     </StyledToast>

diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
@@ -41,12 +41,16 @@ export const Toaster: React.FC<ToasterProps> = (props) => {
       className={viewportClassName}
     >
       {toasts.map(
-        ({ id, title, description, type, icon, style, className }, index) => (
+        (
+          { id, title, description, type, icon, visible, style, className },
+          index
+        ) => (
           <Toast
             key={id}
             idx={index}
             collapsed={collapsed.toString()}
             style={style}
+            visible={visible}
             className={className}
           >
             <div