Closed RobinMalfait closed 1 week ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
headlessui-react | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 20, 2024 3:31pm |
headlessui-vue | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 20, 2024 3:31pm |
This PR adds a
transition
prop to the<Dialog />
component. Internally it uses the<Transition />
and<TransitionChild />
components to coordinate the transitions.The
<Dialog />
itself will be wrapped in a<Transition />
, the<DialogPanel />
will be wrapped in a<TransitionChild />
, and to make the backdrop transition happen we re-introduced the<DialogBackdrop />
component which is adiv
wrapped in a<TransitionChild />
.Recently we introduced
data-*
attribute based transitions (#3273) to simplify transitions. This also introduced thetransition
prop on components such as:ComboboxOptions
DisclosurePanel
ListboxOptions
MenuItems
PopoverPanel
This PR now also adds it to the
<Dialog />
component. This is what a migration could look like:↓↓↓↓↓ Converted to use
data-*
attributes↓↓↓↓↓ Using the new
transition
prop