时间戳

首页 > 解决方案 > 特定元素上的 Vue.js 过渡

javascript - 特定元素上的 Vue.js 过渡

问题描述

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

我希望菜单点击和新页面加载之间的过渡是一个过渡。

我的设置是这样的：

|菜单.vue
|编辑.vue

菜单.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>

菜单.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 实例的属性。

这似乎从右侧引入了这个特定的菜单选项。我怎样才能使它在我单击菜单项时，在路由期间发生转换？

标签： javascriptvue.jstransition

解决方案

推荐阅读