Vue.js在特定元素上的过渡

Question

我有一堆李氏病。当您单击li时，它会打开一个菜单页面。

我希望在菜单单击和加载新页面之间进行转换。

我将其设置如下：

| Menu.vue
| Edit.vue

Menu.vue：

<transition name="slide">
  <router-link to="/account/edit">
    <li class="menu-item">
      <i class="icon fa fa-users"></i>
      My Family
      <i class="right-arrow fa fa-angle-right"></i>
    </li>
  </router-link>
</transition>

Menu.vue CSS

.slide-leave-active,
.slide-enter-active {
  transition: 0.5s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

我将transition: 'slide'作为Menu.vue实例的属性。

这似乎是从右侧带来了此特定菜单选项。我该如何做才能在单击菜单项时在路由过程中发生过渡？