react-hot-toast

react-hot-toast copied to clipboard

The initial toast is not animating, it just pops up but if more toasts are triggered while it is still displayed, they enter and exit smoothly. I'm using toast.custom() but I tried the presets and they behave similarly.

FYI:

• The <Toaster /> is placed in the root of the nextjs project(_app.js), but I tried placing it on a single page but no luck., same behaviour.
• dev-env: NextJS @latest | no TypeScript

I had a similar issue when using Tailwind v3 and Hot-Toast. The solution was tweaking the css animate-fill properties for me.

toast.custom((t) => (
  <div
    className={`${
      t.visible ? "animate-enter" : "animate-leave"
    } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
  >
// ... remaining code below

Turns out the docs where a bit incomplete as animate-enter and animate-leave aren't default tailwind classes.

I was easily able to get my desired result by adding these to my tailwind.config.js

animation: {        
  enter: "fadeInRight 300ms ease-out",
  leave: "fadeOutLeft 300ms ease-in forwards"
},
keyframes: {        
  fadeInRight: {
    "0%": {
      opacity: "0",
      transform: "translate(2rem)"
    },
    "100%": {
      opacity: "1",
      transform: "translate(0)"
    }
  },
  fadeOutLeft: {
    "0%": {
      opacity: "1"
    },
    "100%": {
      opacity: "0"
    }
  }
},

Result:

I had a similar issue when using Tailwind v3 and Hot-Toast. The solution was tweaking the css animate-fill properties for me.

toast.custom((t) => (
  <div
    className={`${
      t.visible ? "animate-enter" : "animate-leave"
    } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
  >
// ... remaining code below

Turns out the docs where a bit incomplete as animate-enter and animate-leave aren't default tailwind classes.

I was easily able to get my desired result by adding these to my tailwind.config.js

animation: {        
  enter: "fadeInRight 300ms ease-out",
  leave: "fadeOutLeft 300ms ease-in forwards"
},
keyframes: {        
  fadeInRight: {
    "0%": {
      opacity: "0",
      transform: "translate(2rem)"
    },
    "100%": {
      opacity: "1",
      transform: "translate(0)"
    }
  },
  fadeOutLeft: {
    "0%": {
      opacity: "1"
    },
    "100%": {
      opacity: "0"
    }
  }
},

Result:

Must be placed:

theme: {
     // ...rest of conf
    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',
          },
          '100%': {
            opacity: '0',
          },
        },
      },
    },
  },

Same issue

There is no animate-enter or animate-leave in TailwindCSS as of right now I'm writing this, To fix this edit your tailwind.config.js and add these:

theme : {
  // ...rest of conf
  extend: {
    animation: {
      enter: "enter .2s ease-out",
      leave: "leave .15s ease-in forwards",
    },
    keyframes: {
      enter: {
        "0%": {
          opacity: "0",
          transform: "scale(.9)",
        },
        "100%": {
          opacity: "1",
          transform: "scale(1)",
        },
      },
      leave: {
        "0%": {
          opacity: "1",
          transform: "scale(1)",
        },
        "100%": {
          opacity: "0",
          transform: "scale(.9)",
        },
      },
    },
  },
};