Pro Tailwind

05. Enter & leave transitions

🐇 TL;DR

  • The Modal appears and disappears a bit too abruptly
  • Let’s add some smooth enter and leave transitions 💅

⬇️ Skip to the challenge

🐢 Background

We can greatly improve the user experience with our Modal component by applying subtle animations when the modal appears and disappears.

To do this, we’ll leverage another component from Headless UI: the Transition component.

Orchestrating multiple transitions

We want to apply different animations to the modal background overlay and the modal panel itself. We can do so easily by wrapping both in a common Transition.Root parent component.

This component will take care of when the Modal should be open or closed.

We can then use a Transition.Child component for each of the seprate elements we want to animate:

<Transition.Root open={open}>
  <Transition.Child>{/* Background overlay */}</Transition.Child>
  <Transition.Child>{/* Modal panel */}</Transition.Child>
</Transition.Root>

Here’s a link to the Headless UI’s Transition component documentation.

🏆 Your challenge 🏆

In the Gitpod workspace below, use Headless UI’s Transition component to:

  1. Make the background overlay fade in and out with opacity transitions.

  2. Make the Dialog.Panel slide up by 2rem on enter, and fade out on leave.

You’ll find more hints within the workspace.

✌️ Good luck!

Open in Gitpod →