TransitionRoot animation skipped when navigating

[sebastiaanluca]

A thing I noticed with Inertia, Headless UI, and using TransitionRoot is that it will skip the configured transition (or end it early) when navigating to or away from the modal route. Had a similar experience with a custom implementation. Kind of depends on how fast the route loads. When navigating to, it usually just pops up without transition. When navigating away, it starts but abruptly hides the modal when halfway.

I assumed @after-leave="redirect" would take care of this because it only starts navigating after the transition ended, but it doesn't.

Is there a way to fix this or configure it differently so it would fully transition in and out when navigating routes?

[lepikhinb]

For the opening transition, you need to set the appear property to make the transition work on an initial request.

Please check the example implementation.

[sebastiaanluca]

I have that set (I used the modal and edit view from the examples), but because the page loads too fast, it skips it entirely or halfway.

<TransitionRoot appear as="template" :show="show" @after-leave="redirect">
    …

Either @after-leave="redirect" triggers too fast (duration set to 500ms using duration-500) or it ignores it and navigates instantly. Anyhow, it happens on page load too, so I'm thinking there's something with the transitions and mounting/unmounting the component.

[lepikhinb]

By the way, do you use the latest version of Headless UI? They have that feature broken in 1.6.5. Try downgrading to 1.6.4.

[sebastiaanluca]

That works like a charm! Sorry for the ticket 😅 And thanks for the package!

For those interested, the related tickets:

• Regression: No transitions on open dialog [v1.6.5] tailwindlabs/headlessui#1607
• Transition calls afterLeave callback too early when using Transition.Child tailwindlabs/headlessui#1364
• TransitionRoot fails to show enter transition when multiple transition-group is present tailwindlabs/headlessui#1088

[lepikhinb]

It’s all good! Thank you for testing it out

[lepikhinb]

@sebastiaanluca also, I'd recommend putting the @after-leave event on a single TransitionChild instead of TransitionRoot, as it seems, that the root component fires the event for every transition child.