v-menu 在看到 v-list-item onclick 之前关闭

Question

我在 vue 和 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
  },
})

点击菜单打开后，点击“选项1”，我打算关闭菜单，随后打开的菜单显示“选项2”。会发生这种情况，但在菜单关闭期间可以看到从“选项 1”到“选项 2”的转换（下面的 gif 示例）。目的是在菜单关闭时看不到转换发生。 （在菜单退出之前列表中没有过渡）

Answer 1

您可以将列表项包装在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>