如何使Vue Routers页面转换

Question

我可以将vue.js与VueRouter一起使用。我需要进行页面转换，但我无法做到。我该如何实现这段代码。

我的代码在https://jsbin.com/hopilecona/edit?html,css,js,output

请帮忙。

Answer 1

页面过渡与普通过渡相同，我可以看到你已经在过渡中包裹了路由器视图，你也想确保它处于out-in模式，所以第一页失败在下一个淡出之前消失：

<transition name="fade" mode="out-in">
    <router-view></router-view>
</transition>

现在要设置淡入淡出过渡，您需要以下css：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

之后，只需将视图路由器设置为正常即可。这是JSFiddle：

https://jsfiddle.net/npe10jot/