Limit 1 toast - problem with transition in and out

[hluu5]

Do you want to request a feature or report a bug?
Not sure if this is a bug or a feature.

What is the current behavior?
Our app uses limit 1 toast to display on screen at a time. Basically, whenever we have an API call error, we would dismiss all open toast and generate a new one. The problem with this is when the previous toast hasn't transitioned out, the new toast already start to transition in, which creates a weird interaction that pushes the new toast down for a split second, wait for the prev toast to transition out (again, split second), then it would replace the position of the old toast. It looks very unprofessional on our app.

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:
It is reproducible by just use the options on demo page. We do use a custom SlideIN and SlideOUT transition though.

const Slide = cssTransition({
enter: styles.toastSlideEnter,
exit: styles.toastSlideExit,
duration: [400, 200],
appendPosition: false,
// collapse: false,
});

.toast-message-container {
width: 100%;
padding: 0;
}

@mixin transform {
transform: translateX(0);
}

@Keyframes Toast__slideInLeft {
from {
transform: translateX(-100%);
visibility: visible;
}
to {
@include transform;
}
}

@Keyframes Toast__slideOutRight {
from {
@include transform;
}
to {
visibility: hidden;
transform: translateX(100%);
}
}

What is the expected behavior?
The sliding in toast would appear at the same row as the sliding out toast.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
All browser.
"react": "^16.13.1",

[fkhadra]

Hello @hluu5,

I've just pushed a fix in version 7.0.2. It seems that you are still using the v6, I would suggest that you update to the latest version. You can find the release note for the v7 here

There is a breaking change regarding the cssTransition. Now it fully relies on CSS. This is document here as well https://fkhadra.github.io/react-toastify/custom-animation/