Vue非父子路由转场动画的问题

Question

我在项目中使用了transition做动画过渡效果，目前样式如下：

.slide-enter-active, .slide-leave-active {
    transition: all 3s;
}

.slide-enter, .slide-leave-to {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
}

在使用过程中发现，如果跳转的路由不是当前路由的子路由，即非父子关系的路由，切换效果会有些偏差。
这是我预期的效果：

{ //登录界面
  path: '/',
  name: 'login',
  component: login,
  children:[
    {
      path: '/homePage',
      name: 'home',
      component: home
    }
  ]
}

现在不想将home页面作为子组件，而是作为一个独立的路由：

{ //登录界面
  path: '/',
  name: 'login',
  component: login
},
{
  path: '/homePage',
  name: 'home',
  component: home
}

可是效果变成了当前页面也出现了移出动画

请问这种情况应该怎么设置才能达到第一张图的效果呢？先谢谢各位了~

Answer 1

vue-page-animation

这个项目也许可以帮到你