fix bug animation
This commit is contained in:
@@ -23,9 +23,10 @@ const ToastContainer: React.FC = () => {
|
|||||||
t.id === toast.id ? { ...t, isExiting: true } : t
|
t.id === toast.id ? { ...t, isExiting: true } : t
|
||||||
));
|
));
|
||||||
|
|
||||||
|
// حذف از DOM بعد از اتمام انیمیشن
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setToasts((prev) => prev.filter((t) => t.id !== toast.id));
|
setToasts((prev) => prev.filter((t) => t.id !== toast.id));
|
||||||
}, 300);
|
}, 300); // مدت زمان انیمیشن خروج
|
||||||
}, 3000);
|
}, 3000);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -46,6 +47,11 @@ const ToastContainer: React.FC = () => {
|
|||||||
? 'bg-white/70 text-black'
|
? 'bg-white/70 text-black'
|
||||||
: 'bg-white/70 text-black'
|
: 'bg-white/70 text-black'
|
||||||
}`}
|
}`}
|
||||||
|
style={{
|
||||||
|
animationFillMode: 'forwards',
|
||||||
|
animationDuration: '0.3s',
|
||||||
|
animationTimingFunction: 'ease-out'
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
toast.type === 'success' ? <TickCircle className='size-5' color='green' /> :
|
toast.type === 'success' ? <TickCircle className='size-5' color='green' /> :
|
||||||
|
|||||||
Reference in New Issue
Block a user