Transition of drawer state
Hey, I want to make a Drawer that can have multiple states/menus. Example: First screen should be buttons of what to do (upload as pdf or png) and then it should switch to the new menu. Switching kind of works. But the size of the drawer doesn't animate but rather jumps around. how to fix? I'm using ui3
<UDrawer
should-scale-background
title="Upload"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
v-model:open="drawerOpenState"
>
<UButton
icon="i-heroicons-plus"
class="bottom-14 left-1/2 fixed shadow-sm rounded-full -translate-x-1/2 cursor-pointer transform"
color="primary"
size="xl"
variant="solid"
/>
<template #body>
<div class="transition-all">
<div key="menu-0" class="h-64" v-if="drawerMenuState === 0">
<div class="w-1/2">
<!-- file and submit -->
<p @click="drawerMenuState = 1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro
saepe suscipit aperiam! Hic architecto libero debitis similique!
Eaque laudantium vero ab iusto? Ut dolores facilis illo molestias
ex consequuntur vitae.
</p>
</div>
</div>
<div key="menu-1" class="h-32" v-else-if="drawerMenuState === 1">
<div class="w-1/2">
<!-- file and submit -->
<p @click="drawerMenuState = 0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro
saepe suscipit aperiam! Hic architecto libero debitis similique!
Eaque laudantium vero ab iusto? Ut dolores facilis illo molestias
ex consequuntur vitae.
</p>
</div>
</div>
</div>
</template>
</UDrawer> <UDrawer
should-scale-background
title="Upload"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
v-model:open="drawerOpenState"
>
<UButton
icon="i-heroicons-plus"
class="bottom-14 left-1/2 fixed shadow-sm rounded-full -translate-x-1/2 cursor-pointer transform"
color="primary"
size="xl"
variant="solid"
/>
<template #body>
<div class="transition-all">
<div key="menu-0" class="h-64" v-if="drawerMenuState === 0">
<div class="w-1/2">
<!-- file and submit -->
<p @click="drawerMenuState = 1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro
saepe suscipit aperiam! Hic architecto libero debitis similique!
Eaque laudantium vero ab iusto? Ut dolores facilis illo molestias
ex consequuntur vitae.
</p>
</div>
</div>
<div key="menu-1" class="h-32" v-else-if="drawerMenuState === 1">
<div class="w-1/2">
<!-- file and submit -->
<p @click="drawerMenuState = 0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro
saepe suscipit aperiam! Hic architecto libero debitis similique!
Eaque laudantium vero ab iusto? Ut dolores facilis illo molestias
ex consequuntur vitae.
</p>
</div>
</div>
</div>
</template>
</UDrawer>
