I'm currently utilizing react-hot-toast for displaying alerts and animating them during page transitions.
The animation involves a double fade-in effect when transitioning between pages.
In my project, I've integrated tailwindcss-animate within my tailwind.config.js to incorporate animation classes.
Specifically, I'm utilizing 4 essential animation classes: animate-in, animate-out, fade-in, & fade-out
The customized alert box being animated is of type Success.
Success.tsx
import toast, { ToastOptions } from 'react-hot-toast';
import { CheckCircleIcon } from '@heroicons/react/outline';
import clsx from 'clsx';
interface ISuccess {
message: string;
options?: ToastOptions;
}
export const Success = ({ message, options }: ISuccess) => {
toast.custom(
(t) => (
<div
className={clsx(
'flex rounded-lg bg-gray-900 py-2.5 px-3 shadow-lg ring-1 ring-black ring-opacity-5',
{
'animate-in fade-in': t.visible,
'fade-out animate-out': !t.visible,
}
)}
>
<CheckCircleIcon className="h-6 w-6 text-gray-700" />
<div className="ml-2 text-gray-300">{message}</div>
</div>
),
{
duration: 250,
...options,
}
);
};
If you view the demo below and click on the link provided, you'll observe the animation playing twice as demonstrated in the gif:
How can I modify it to only have a single playback?
Explore Stackblitz Demo → https://stackblitz.com/edit/animate-in-tailwind
Github Repository → https://github.com/deadcoder0904/animate-in-tailwind/