Web Animation · Exercise 5 of 5 Previous
Beginner
A toast that removes itself (launch page)
Part of Topic 4.6. The CSS is done. Write showToast(message, { duration }) in the JavaScript: it adds a .toast with the message to #toasts, and after duration ms adds the class leaving.
Remove the toast when its exit animation ends. Do not remove it when the enter animation ends. Two toasts in a row must both work.
What Check tests
- Pressing Save adds a toast with the message
- The toast is still there after its entrance ends (400 ms)
- After the duration it is leaving, and a moment later it is gone
- Two quick presses give two toasts
- With reduced motion the toast only fades
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.
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
frames
Console
Nothing logged yet.