Adding reduced motion media query to disable notification animations.

[cbleslie]

Hey cool React Hot Toast people!

The problem:
Animations are cool. Sometimes; animations are less than ideal for some users. MDN can explain this all the better. Currently React Hot Toast's animations don't obey the reduced motion media query that responds to the user's OS.

How this PR addresses the a11y issue:
On the ToastBar component I have disabled the transitions and animations in the event that prefers-reduced-motion media query is enabled.

Please let me know if this is acceptable. Look forward to your feedback.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/timo/react-hot-toast/7y1NMgdmaDWJpesMQKJMncbwMmhp
✅ Preview: https://react-hot-toast-git-fork-cbleslie-reduced-motion-timo1.vercel.app

[timolins]

Great idea, thanks for bringing that up. However, it doesn't seem to work for me on the preview link. Does it work for you?

[cbleslie]

Hey @timolins , Try now. Please ensure you have reduced motion set in your OS settings <3.

[Kilian]

Looks good, I made a quick comparison for you:
https://user-images.githubusercontent.com/41970/107065944-a2b2eb00-67dd-11eb-9e60-a6dfd0d67b5c.mp4

[cbleslie]

@Kilian It looks good enough for me; Are you good with it?

[timolins]

That looks great already! One thing we should sort out is that the missing exit animation, causes them to stack for 1s when they disappear.