Vuetify v-menu关闭时v-list-item状态切换过渡可见问题求解

问题根源 #

点击选项后t变量会立即更新，此时菜单的关闭动画还在执行，列表内容切换的过渡会和菜单关闭动画叠加，因此被用户看到。

解决方案 #

延迟t变量的更新时机，等菜单完全关闭后再修改状态即可，调整代码如下：

HTML 代码

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <!-- 绑定v-model控制菜单显隐，添加after-leave事件监听关闭动画完成时机 -->
      <v-menu v-model="menuOpen" @after-leave="t = !t">
        <template v-slot:activator="{ on }">
          <v-btn v-on="on">
            Click me
          </v-btn>
        </template>
  
        <v-list>
          <v-list-item v-if="!t" @click="menuOpen = false">
            <v-list-item-title>Option 1</v-list-item-title>
          </v-list-item>
  
          <v-list-item v-if="t" @click="menuOpen = false">
            <v-list-item-title>Option 2</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </div>
  </v-app>
</div>

JS 代码

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    t: false,
    menuOpen: false // 新增菜单显隐控制变量
  },
})

实现说明 #

after-leave是Vuetify组件内置的过渡生命周期事件，会在组件退出动画完全执行结束后触发，此时菜单已经从页面中移除，再修改t的值不会被用户看到切换过程，下次打开菜单时就会直接渲染更新后的选项。

内容的提问来源于stack exchange，提问作者TryingToTry