0
308
Visualizaçõesv-menu close before v-list-item onclick is seen
I have the following menu setup with vue and 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
},
})
After clicking the menu open, and clicking "Option 1", I intend for the menu to close, and the subsequent menu open to show "Option 2". This happens, but the transition from "Option 1" to "Option 2" is seen during the menu close (gif example below). The intention is to not see the transition occur while the menu is closing. (No transition in the list until menu exits)
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
You can wrap the list items in a 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
Relatório
Responde à pergunta