toast.custom leave animation does not play, and padding error

[clam61]

I can make this custom toast, and the "enter" animation plays, but the "leave" animation does not. When I click the button on the toast, there is a short delay and then the toast disappears without the animation.

I have confirmed that the animations work, by using them on divs in a page.

The second problem I have is that if I specify p-5 for padding, the padding becomes 0. However, p-4 works.

Setup:

"postcss": "^8.4.5",
"tailwindcss": "^3.0.7",
"react-hot-toast": "^2.2.0",
"next": "latest",

my code to launch a toast

return toast.custom((t) => (
  <div
    className={`${
      t.visible ? 'animate-enter' : 'animate-leave'
    } max-w-md bg-red-500 rounded flex`}
  >
    <div className="flex-1 w-0 p-4">
      <div className="flex items-center">
        <div><XCircleIcon className="h-8 w-8 text-white" aria-hidden="true" /></div>
        <div className="ml-3 text-white white-space-nowrap">
          {message}
        </div>
      </div>
    </div>
    <div className="flex border-l border-white">
      <button
        onClick={() => toast.dismiss(t.id)}
        className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-white font-medium focus:outline-none focus:ring-0"
      >
        Close
      </button>
    </div>
  </div>
), {
  duration:Infinity
})

tailwind config

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      boxShadow: {
        't-sm': '0 -1px 2px 0 rgba(0, 0, 0, 0.05)',
        't-md': '0 -4px 6px -1px rgba(0, 0, 0, 0.1)',
        't-lg': '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        't-xl': '0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        't-2xl': '0 -25px 50px -12px rgba(0, 0, 0, 0.25)',
        't-3xl': '0 -35px 60px -15px rgba(0, 0, 0, 0.3)',
      },
      animation: {
        enter: 'enter 200ms ease-out',
        leave: 'leave 200ms ease-in',
      },
      keyframes: {
        enter: {
          '0%': { transform: 'scale(0.9)', opacity: 0 },
          '100%': { transform: 'scale(1)', opacity: 1 },
        },
        leave: {
          '0%': { transform: 'scale(1)', opacity: 1 },
          '100%': { transform: 'scale(0.9)', opacity: 0 },
        },
        'slide-in': {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('autoprefixer'),
  ],
}

[shftlvch]

I guess it's something to do with Tailwind JIT plus toasts rendering. Try to add "animate-enter" somewhere else on the page (in addition to toast itself) and see what happens. Where "code to launch a toast" is located, in the components folder?

[timolins]

Try adding the forwards keyword to your animations:

 animation: {
   enter: 'enter 200ms ease-out forwards',
   leave: 'leave 200ms ease-in forwards',
},

This prevents the animation from reseting after they are done. Without it will jump from opacity: 0 to opacity: 1 again.

---

Bonus: You can also use TailwindCSS to create your animations, by using HeadlessUI's <Transition/> component.

You can find an example here: https://codesandbox.io/s/react-hot-toast-tailwindcss-headless-ui-qvjri?file=/src/App.js Instead of using toast.custom(), I'm replacing the default toast renderer – which might be the behaviour you want.

[clam61]

Hi. I tried adding forwards to both, but it did not help. The problem is not the jumping, but that the leave animation doesn't play at all. Is there a reason my react toast is not behaving the same as the demo code?

There is also the padding problem. Suddenly it resolved itself, i dont know why.

[clam61]

I guess it's something to do with Tailwind JIT plus toasts rendering. Try to add "animate-enter" somewhere else on the page (in addition to toast itself) and see what happens. Where "code to launch a toast" is located, in the components folder?

yeah, i tried that. animate-enter and animate-leave function without issue when used outside of a toast

[shftlvch]

`

I guess it's something to do with Tailwind JIT plus toasts rendering. Try to add "animate-enter" somewhere else on the page (in addition to toast itself) and see what happens. Where "code to launch a toast" is located, in the components folder?

yeah, i tried that. animate-enter and animate-leave function without issue when used outside of a toast

Could you reproduce that issue in a sandbox? I've just made this leave-enter animation in my current project and it works without the issues you mentioned. In my case, it was I tried to create the component in /lib folder, out of the default

content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],

[clam61]

the animation isnt the problem. because i think i took it off the github repo for hot toast examples. it must be with my config or something else is interfering.

you brought up an interesting point. what is the "content" section in tailwind config? i also call toast.custom from a file inside ./lib

i have an idea what it is--im guessing i need to add

content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './lib/**/*.{js,ts,jsx,tsx}',
  ],

[clam61]

looks like that was the issue. next time i wont gloss over parts of the config file i dont undrstand. thanks everyone.

[shftlvch]

@timolins I think this one is resolved.