animation toast

src/components/Toast.tsx

@@ -5,6 +5,7 @@ interface Toast {
     id: string;
     message: string;
     type?: 'success' | 'error' | 'info';
+    isExiting?: boolean;
 }
 
 let addToast: (toast: Toast) => void;
@@ -18,7 +19,13 @@ const ToastContainer: React.FC = () => {
 
         // حذف خودکار بعد از ۳ ثانیه
         setTimeout(() => {
-            setToasts((prev) => prev.filter((t) => t.id !== toast.id));
+            setToasts((prev) => prev.map(t =>
+                t.id === toast.id ? { ...t, isExiting: true } : t
+            ));
+
+            setTimeout(() => {
+                setToasts((prev) => prev.filter((t) => t.id !== toast.id));
+            }, 300);
         }, 3000);
     };
 
@@ -28,15 +35,16 @@ const ToastContainer: React.FC = () => {
     }, []);
 
     return (
-        <div className="fixed  top-4 text-sm right-0 left-0 mx-auto w-fit z-50 flex flex-col gap-2">
+        <div className="fixed top-4 text-sm right-0 left-0 mx-auto w-fit z-50 flex flex-col gap-2">
             {toasts.map((toast) => (
                 <div
                     key={toast.id}
-                    className={`px-4 flex items-center gap-2 backdrop-blur-2xl h-16 min-w-[300px] rounded-2xl shadow-md transition-transform ${toast.type === 'success'
+                    className={`px-4 flex items-center gap-2 backdrop-blur-2xl h-16 min-w-[300px] rounded-2xl shadow-md 
-                        ? 'bg-white/70 text-black'
+                        ${toast.isExiting ? 'animate-slide-out-right' : 'animate-slide-in-right'} ${toast.type === 'success'
-                        : toast.type === 'error'
                             ? 'bg-white/70 text-black'
-                            : 'bg-white/70 text-black'
+                            : toast.type === 'error'
+                                ? 'bg-white/70 text-black'
+                                : 'bg-white/70 text-black'
                         }`}
                 >
                     {

tailwind.config.js

@@ -21,6 +21,20 @@ module.exports = withMT({
       },
       borderRadius: {
         '2.5': '10px'
+      },
+      keyframes: {
+        'slide-in-right': {
+          '0%': { transform: 'translateX(100%)', opacity: '0' },
+          '100%': { transform: 'translateX(0)', opacity: '1' }
+        },
+        'slide-out-right': {
+          '0%': { transform: 'translateX(0)', opacity: '1' },
+          '100%': { transform: 'translateX(100%)', opacity: '0' }
+        }
+      },
+      animation: {
+        'slide-in-right': 'slide-in-right 0.3s ease-out',
+        'slide-out-right': 'slide-out-right 0.3s ease-out'
       }
     },
   },