toast.custom displays toast briefly after exit animation

[lambo81]

Following the toast.custom example on the site, my toast entry animation plays, the exit animation plays, but then after the exit animation is done and the toast has faded out, the toast suddenly appears again in full opacity for a moment before disappearing completely. I am using "@material-tailwind/react": "0.3.4" and "react-hot-toast": "^2.2.0",

here is my code:

toast.custom((t) => 
                        (<div className={`bg-white px-6 py-4 shadow-md rounded-full ${
                                t.visible ? 'animate-enter' : 'animate-leave'
                              }`}>Hello TailwindCSS! 👋</div>) 
                      );

I added to my tailwind.config.css

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      animation: {
        enter: 'fadeInRight 300ms ease-out',
        leave: 'fadeOutLeft 300ms ease-in',
      },
      keyframes: {
        fadeInRight: {
          '0%': {
            opacity: '0',
            transform: 'translate(2rem)',
          },
          '100%': {
            opacity: '1',
            transform: 'translate(0)',
          },
        },
        fadeOutLeft: {
          '0%': {
            opacity: '1',
            transform: 'translate(0)',

          },
          '100%': {
            opacity: '0',
            transform: 'translate(2rem)',
          },
        },
      },
    },
  },
  plugins: [],
}

[TrejoCode]

Same error here :(

[BrandLibel]

Just add the forwards animation direction property like so: leave: 'fadeOutLeft 300ms ease-in forwards',

For reference, see this line for how react-hot-toast does it: https://github.com/timolins/react-hot-toast/blob/main/site/tailwind.config.js#L24

[clam61]

Thanks! Hopefully the documentation can be fixed for others

[secretwpn]

@timolins would be nice to fix the example here https://react-hot-toast.com/docs/styling (the last section, Change enter and exit animations)