Nuxt UI leave transitions
Hey all, seems like the leave transitions do not work using Nuxt UI. Is there a work around for it? Or some other solution to get it to work?
5 Replies
Uuh I dont think that is really needed since it doesnt work anywhere, not even on the documentation
https://ui.nuxt.com/components/dropdown
Enter animation works fine, leave animation never triggered
Same goes for ContextMenu, SelectMenu etc. Basically everything that is dropdown like.
It is because of this:
https://github.com/nuxt/ui/blob/49b73aa024be14a9aa150a2804f4dcb18542fa49/src/runtime/components/elements/Dropdown.vue#L20
The v-if should be inside the transition, not outside. If it is outside it never triggers the transition.
The appear was a quick fix but that only works for enter classes not for leave
GitHub
ui/src/runtime/components/elements/Dropdown.vue at 49b73aa024be14a9...
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS. - nuxt/ui
Kars van Iersel
StackBlitz
Nuxt UI - Playground (forked) - StackBlitz
Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.
This is with the exact code from the Documentation, I copy pasted the UI transition into it and increased the leave duration to 1000 ms to make it super obvious.
But as you can see, it never triggers cause of the
v-if happening before the <transition>