Modal dialog transitions

[00:00] We've styled the button, we've styled the modal, we added a keyboard shortcut to open the modal, it would also be nice to add some transitions to make everything smoother. But before we do this, let's set the initial isOpen value to false so we start with a closed modal.

[00:17] Now I want to transition the overlay opacity from 0 to 100 when we open the modal and then bring it down from 100 to 0 when we close it. At the same time, I want to have like a scale effect for the modal content.

[00:33] To add and coordinate these two transitions we'll need to use the TransitionRoot and TransitionChild components from the headless ui library. So let's import them, and then register them.

[00:46] The TransitionRoot component will wrap the whole dialog, and then we'll have two TransitionChild components; one for the overlay, and one for the modal content.

[01:09] By default, these components are rendered as div elements, but that will mess up with our layout, so I'll tell them to render as template elements instead. Then the TransitionRoot component has a show prop that controls the transition. Let's set this to isOpen. Now everything is in place for us to add our desired transitions.

[01:31] The TransitionChild component has a couple of props we can use to control the transition. First, we have the enter prop, and here we can set the classes we want to apply during the whole entering phase; we usually define the duration and the easing of the transition. Let's set this to duration-200 ease-out. ease-out will transition fast at the beginning, and then slow down towards the end.

[01:57] Then we have the enter-from prop, and here we'll define our starting point. We want to start from opacity-0. Next up, we have enter-to, which is where we want to end up when the transition finishes; which will be opacity-100.

[02:11] These three props are used when we open the modal. We have similar props for closing the modal, but instead of enter, we have leave. On these leaves props we need to do the reverse of what we did on the enter props. So instead of ease-out, which is fast at the beginning and slow towards the end, we'll use ease-in, which is slow at the beginning and fast at the end. Instead of starting from opacity-0, we'll now begin from opacity-100, and instead of ending with opacity-100, we'll end up with opacity-0. So the leave props are the reverse of the enter props.

[02:51] For the modal content we want the same opacity transition, so I'll copy and paste them, but we also want it to scale a little bit. So in addition to the opacity we'll also add scale classes when we open the modal. We'll start with a scale of 95 and transition to a scale of 100. Then, when we close the modal, we'll start with a scale of 100 and end up with 95. And that's it. Let's test it out. Open the modal, close the modal, open the modal, close the modal, smooth as butter.