TransitionRoot animation skipped when navigating

[sebastiaanluca]

TransitionRoot animation skipped when navigating

[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.

[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:

• tailwindlabs/headlessui#1607
• tailwindlabs/headlessui#1364
• tailwindlabs/headlessui#1088

[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]

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