UDrawer with inset doesn't fully animate off the edge of screen
Given NuxtUI's drawer (
UDrawer) with the inset option...
When closing the drawer, the drawer does not animate fully off the screen. Instead, as an end-user, I see the drawer animate to zero but is still visible for a moment, before ultimately just disappearing.
Instead, the drawer should fully animate off the screen, just like when not using inset.
Is this a bug or is my implementation wrong?
Sample instance:
<UDrawer id="myDrawer"
v-model:open="store.myDrawer"
direction="top"
inset
class="myDrawer">
<template #content>
<div class="p-4 min-h-32 flex flex-col gap-4 overflow-hidden">
<SomeComponent />
</div>
</template>
</UDrawer>4 Replies
Hi @Kal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information in the knowledge sources, the behavior you’re describing with the
Your implementation is correct according to the documentation. The incomplete off-screen animation when using
- UDrawer usage and theme configuration - UDrawer props and variants ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
UDrawer component and the inset prop appears to be a limitation or quirk of the current implementation, not an error in your usage.
The theme configuration for the drawer’s animation and positioning shows that when inset is true, the drawer content is positioned with classes like inset-x-4 top-4 (for direction="top"), which means the drawer is inset from the edges of the screen by a fixed amount. The animation classes and compound variants are primarily focused on the open/close transitions, but there is no explicit mention of a different or extended animation for the inset variant that would ensure the drawer animates fully off-screen before disappearing. This is in contrast to the non-inset variant, which uses inset-x-0 top-0 and rounded corners, and likely animates fully off the edge as expected.
Here’s the relevant part of the theme config for direction: top and inset: true:
— Drawer Theme Configuration
There is no documentation or example in the knowledge sources that describes a different animation for the inset variant, nor is there a workaround or prop to change this behavior. The documentation focuses on the positioning and appearance, not the animation details for the inset variant. Therefore, it is likely that this is either a limitation or a bug in the current implementation of Nuxt UI’s UDrawer component.
Summary:Your implementation is correct according to the documentation. The incomplete off-screen animation when using
inset appears to be a limitation or bug in Nuxt UI’s current drawer implementation, not a mistake in your code. If this behavior is critical to your UX, you may want to report it to the Nuxt UI team or check for updates in future releases that address this animation detail.
References:- UDrawer usage and theme configuration - UDrawer props and variants ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@821437800225570892> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Ok, I've made a successful workaround for my specific drawer:
.myDrawer[data-state='closed'] {
top: calc(var(--spacing) * 0);
}
Specifically on the closed state, forcing top to be 0.
This of course doesn't account for other drawers and directions.I made a bug report here:
https://github.com/nuxt/ui/issues/3985
GitHub
Drawer-with-inset doesn't fully animate to edge of viewport · Issu...
Environment Operating System: Darwin Node Version: v20.15.0 Nuxt Version: 3.16.2 CLI Version: 3.25.0 Nitro Version: 2.11.9 Package Manager: [email protected] Builder: - User Config: modules, security, ro...