Instructor: 0:00 I'll start by wrapping our Dialog component in a Transition Root component, so I'll scroll down in here, Transition.Root, and let's move the closing tag at the end of the component. As you can see we're getting an error because our Transition component needs a show prop which is set to true or .

0:19 Basically, here we want to base this logic on the open state of the Dialog. Show equals open, which will fix the problem, and we can now actually remove the open prop on the Dialog component because it's able to derive that information from the Transition component.

0:37 If you try to toggle the modal everything still works. We don't have any transition animations yet so let's do that now. The first element we want to animate on enter and leave is the background overlay which is this div here. Let's wrap this in a Transition.Child this time.

0:54 Our Transition Child component will have a series of props where we can pass some tailwind classes to handle the transition animation. We'll have enter, enterFrom, and enterTo. Then the same for leave. Leave, leaveFrom, and leaveTo. In the enter prop, we'll have tailwind classes that should be there during the entire enter life cycle. We want "transition" and "ease-out."

1:22 Then remember we want to fade in this background overlay, so we can do, from, "opacity-," to, "opacity-100." Let's try that. Nice. You can see that the background fades in on enter slowly but it still disappears instantly.

1:40 For the leave transition, we'll essentially do the exact opposite. "Transition ease-in," and with leaveFrom, "opacity-100" to, "opacity-." Let's try that. Fade in, fade out. Very nice.

1:56 Right now, our background overlay fades in nicely but the model panel itself just appears and disappears abruptly. That feels a little bit odd, especially on leave, and we can fix this with another transition trial. It will be slightly similar, so I will copy the first Transition Child with all the props as a starting point.

2:15 Let's scroll down to the Dialog panel right here. I will paste a Transition Child wrapper here around the Dialog panel, and let's move the closing tag after the closing Dialog panel. Right now, both the background overlay and the panel should have the same fade in and out animation. That looks nice, but we can make things much nicer.

2:35 Remember we want to slide in from the bottom, so instead of opacity to 100, our enterFrom animation will go from "translate-y-8" to "translate-y-." We start off the enter animation a little bit lower and animate into the normal position. Let's try that. Very nice.

3:01 The fade out on leave is fine, but I think we can have some fun and also make the element scale down just a little bit to add a bit of delight. I will keep "opacity-100," but also add "scale-100," and then "scale-95" percent. Let's try it out. Slide from the bottom and scale down. That looks great. Good job.