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;
@@ -17,8 +18,14 @@ const ToastContainer: React.FC = () => {
         setToasts((prev) => [...prev, toast]);
 
         // حذف خودکار بعد از ۳ ثانیه
+        setTimeout(() => {
+            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);
     };
 
@@ -32,7 +39,8 @@ const ToastContainer: React.FC = () => {
             {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 
+                        ${toast.isExiting ? 'animate-slide-out-right' : 'animate-slide-in-right'} ${toast.type === 'success'
                             ? 'bg-white/70 text-black'
                             : toast.type === 'error'
                                 ? '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'
       }
     },
   },