Multi-Style Tailwind Components 23 exercises

Transcript

0:00 Right now, our modal appears and disappears really abruptly and I think we can improve the situation with a little bit of Enter and Leave animations. To do that, we're going to use Headless UI's transition components.

0:11 Let's open the modal. We want two different animations. We want the background overlay to fade in and then we want the modal panel to subtly slide in from the bottom.

0:21 In our modal component file, we are importing the transition component from Headless UI, and you're going to use this to apply Enter and Leave transition. We want the background overlay to fade in on Enter and fade out on Leave.

0:34 Then, the dialogue panel should slide in from the bottom and maybe just fade out on Leave. You'll need to use a Transition.Root component to orchestrate both these animations. Good luck.

Problem

Transitioning Modals with Headless UI

Let's make our modal appear and disappear more smoothly by using Headless UI's transition components.

There are two different animations that will enhance the Modal:

A fade-in for the background overlay
A subtle slide-in from the bottom for the modal panel

Challenge

Your challenge is to

Transcript

0:11 Let's open the modal. We want two different animations. We want the background overlay to fade in and then we want the modal panel to subtly slide in from the bottom.

0:34 Then, the dialogue panel should slide in from the bottom and maybe just fade out on Leave. You'll need to use a Transition.Root component to orchestrate both these animations. Good luck.