如何制作 Vue Router 页面转换

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/