0
310
Vistasv-menu se cierra antes de ver v-list-item onclick
Tengo la siguiente configuración de menú con vue y vuetify:
<div id="app"> <v-app id="inspire"> <div class="text-center"> <v-menu> <template v-slot:activator="{ on }"> <v-btn v-on="on" > Click me </v-btn> </template> <v-list> <v-list-item v-if="!t" @click="t=!t"> <v-list-item-title>Option 1</v-list-item-title> </v-list-item> <v-list-item v-if="t" @click="t=!t"> <v-list-item-title>Option 2</v-list-item-title> </v-list-item> </v-list> </v-menu> </div> </v-app> </div> new Vue({ el: '#app', vuetify: new Vuetify(), data: { t: false }, })Después de hacer clic en el menú abierto y hacer clic en "Opción 1", tengo la intención de que el menú se cierre y el menú posterior se abra para mostrar la "Opción 2". Esto sucede, pero la transición de "Opción 1" a "Opción 2" se ve durante el cierre del menú (ejemplo de gif a continuación). La intención es que no se produzca la transición mientras se cierra el menú. (No hay transición en la lista hasta que sale del menú)
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede envolver los elementos de la lista en un transition-group :
new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ t: false }) }) .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app id="inspire"> <div class="text-center"> <v-menu> <template v-slot:activator="{ on }"> <v-btn v-on="on">Click me</v-btn> </template> <transition-group tag="v-list" name="fade"> <v-list-item v-if="!t" @click="t=!t" key="1"> <v-list-item-title>Option 1</v-list-item-title> </v-list-item> <v-list-item v-else @click="t=!t" key="2"> <v-list-item-title>Option 2</v-list-item-title> </v-list-item> </transition-group> </v-menu> </div> </v-app> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta