React · Exercise 5 of 5 Previous
Advanced
Mini build: toasts with an exit animation
Three toasts (.toast) are shown, each with a Dismiss button. Right now dismissing removes a toast instantly.
Make dismissing animate: the toast gets the extra class leaving (the CSS fades it out over 300 ms) and stays in the DOM until its opacity transitionend, then it is removed.
A toast that is leaving must say so to assistive technology too: give it aria-hidden="true" while leaving.
Respect reduced motion: when matchMedia("(prefers-reduced-motion: reduce)").matches is true, remove the toast at once.
What Check tests
- Three toasts are shown
- Right after Dismiss, the toast is still there with the class
leaving - The leaving toast has
aria-hidden="true" - After the fade it is removed
- The other toasts are not leaving
- Dismissing another toast works the same way
- Checks for reduced motion
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.