react-notifications icon indicating copy to clipboard operation
react-notifications copied to clipboard

Exit animations are broken on some versions of react

Open adam-carruthers opened this issue 2 years ago • 0 comments

The CSS of the repository uses the class .notification-leave to draw the exit animations. Some versions of react however use .notification-exit (and .notification-exit-active) as the exit animations. On these versions of react the exit animations do not work, the CSS is wrong, and the notifications leave by simply disappearing (which is pretty ugly).

I created a new React app using the standard create-react-template. I installed only react-notifications, and I was able to reproduce this error. You can see the error in https://github.com/goodyguts/react-notifs-issue

Additionally, I show how the animation can easily be brought back just by changing the CSS to say exit instead of leave. You can see it working on https://github.com/goodyguts/react-notifs-issue/tree/the-solution

Recommended fix: Add classes that say exit to the SCSS

adam-carruthers avatar May 02 '22 20:05 adam-carruthers