如何制作Vue路由器页面转换

Question

我可以在vueRouter中使用vue.js。我需要制作页面转换，但我无法做到。我怎样才能实现这个代码。

我的代码是在这里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/