React-toastify: Animations not working, autoClose not working

[emadow]

Oddly, animations are not working for me at all. When the toast appears, there is no animation. Similarly, when I manually close the toast, there is an abrupt close with no animation. And because autoClose is dependent on the animation, the toast will never close until triggered manually.

I have the CSS file referenced correctly, and styling seems to work otherwise. My implementation is as follows:

Container:

<ToastContainer
    position="top-right"
    type="error"
    autoClose={4000}
    hideProgressBar={false}
    closeOnClick={true}
    pauseOnHover={true}
/>

Trigger code (tried placing this in various areas in my code with the same result):

toast('message', {
    type: toast.TYPE.ERROR,
    autoClose: 3000,
    hideProgressBar: false,
    pauseOnHover: true,
});

I've tried every variation of settings to no avail. This was attempted using the newest versions of Chrome and Safari. What could be going wrong here?

[fkhadra]

@emadow I don't have the issue at all. I'm also using chrome and safari latest version. Do you see any things when you open the developer tools ?

[emadow]

@fkhadra no errors in the console. Very puzzling.

[emadow]

Ack. Seems to be the result of how webpack was dealing with my imports -- the css @keyframes were not accessible globally.

[fkhadra]

Ow I'm glad you fixed it.

[ilovebeatles]

@emadow Can you please share your fix? I've stuck with this too.

[MaxiSantos]

I'm also having this issue

[JustFly1984]

I have CSS modules in my project, and just copied all CSS from the module and added :global prefix to each one. I do not have animations nor autoClose working.

[fernandolobao]

I have the same problem as @JustFly1984 , autoclose and animation are not working because I had to put the css rules under :global approach. Does someones have a fiz already?

[k4st0r42]

Same problem for me, +1

[fkhadra]

Hello,

It would be nice to reproduce the bug via codesandbox. Anyone know how to do this ?

[k4st0r42]

I could, but is it possible to update webpack configuration with codesandbox ?

[k4st0r42]

Here the code : https://codesandbox.io/s/z252xzmvrl

CSS for toasts does not work on codesandbox because the webpack.config.js is not used (so the modules are not activated by default for css-loader). I don't know if it is possible to configure webpack on codesandbox...

In my project on my PC, the CSS of the toast box works well, but not the autoclose or animations.
If I remove modules option in css-loader and import globally like in your documentation, autoclose and animations work.

[JustFly1984]

In my case I use CSS modules, so I can’t just import styles from
node_modules. I’ve copied css, and added global prefix to each class name

[vijilvpillai]

Me too facing the same issue. Does anyone know how to fix this webpack issue . The progressbar and auto close is not working

[chiragbhansali]

I was using Next.js with CSS Modules and faced a similar issue. I solved it by tweaking the CSS file as follows:

Initial:

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

Final (wrapping the animation name with :global()):

@keyframes :global(Toastify__slideInUp) {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

Source: css-modules#115

I had to manually add :global to all the keyframes, apart from a common :global for the other classes. I have made the edited stylesheet with all the :global's added in this gist so that you don't have to go through the same pain 😅

[chiragbhansali]

@fkhadra Can you please add this to the documentation? It might be helpful for people using CSS Modules.