Estoy tratando de hacer una barra de herramientas vuetify que se extienda al hacer clic. ( https://vuetifyjs.com/en/components/toolbars/ )

Aquí hay una muestra de cómo se ve:

 <v-toolbar width="100%" height="40" extension-height="80" @click="toggleToolbarExtension" > // stuff here... <v-expand-transition> <template v-if="isToolbarExtended" #extension="{}"> <v-list dense color="transparent">

Entonces, la parte extendida de este componente vuetify solo se crea en DOM cuando los datos son verdaderos. Pero lo que me gustaría es que el componente "crezca" de altura 0 a 80 con una transición. Entonces, aquí están los cambios que hice:

 <v-toolbar width="100%" height="40" extension-height="isToolBarExtended ? 80 : 0" @click="toggleToolbarExtension" > // stuff here... <v-expand-transition> <template #extension="{}"> <v-list v-show="IsToolBarExtended" dense color="transparent">

Pero no está funcionando. He buscado en foros pero no tengo a nadie intentando reproducir el ejercicio que estoy haciendo. Parece que la etiqueta de plantilla no puede tomar ninguna transición.

¿Cómo hacer que la extensión de la barra de herramientas vuetify crezca con una transición suave?