[Bug] Close on the Toast or Close button not working when disable animations

[Its-Alex]

Do you want to request a feature or report a bug?

I want to report a bug

What is the current behavior?

I can't close the Toast when disabling animations. Maybe I'm doing something wrong when disabling animations 🤔

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

You can reproduce the bug in this sandbox: https://codesandbox.io/s/react-toastify-animatecss-forked-k4t1m?file=/src/App.js.

You must click on Example with no transition.

What is the expected behavior?

The Toast must close when clicking on the Toast or Close button

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I use:

• react-toastify: 7.0.4
• react: 17.0.2

[Its-Alex]

@fkhadra Have you an idea on how to fix this?

[fkhadra]

Hey @Its-Alex,

By design, the close behavior is coupled with the animation. eg onTransitionEnd/onAnimationEnd. There is no built-in way to disable the transition, I should probably add this in the future release.

Anyway, to fix your issue you can create a dummy animation

@keyframes dummy {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.dummy {
  animation: dummy 0.6s;
}

Then use it as follow

const empty = cssTransition({
  enter: "dummy",
  exit: "dummy",
  collapse: false
});

toast.dark("Hey 👋, see how easy!", {
      transition: empty
});

Live example here https://codesandbox.io/s/react-toastify-animatecss-forked-13kuw?file=/src/App.js:843-912

Hope this help

[Its-Alex]

@fkhadra Thanks this works perfectly!

[fkhadra]

Awesome. I'll probably add this to the documentation