如何使Vue路由器页面转换

How to make Vue Routers Page Transition

本文关键字：转换 路由器 何使 Vue      更新时间：2023-09-26

我可以使用vue.js与VueRouter。我需要进行页面转换，但我不能。如何实现这段代码?

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

请帮。

页面过渡与正常过渡相同，我可以看到你已经在过渡中包装了你的路由器视图，你还想确保它是在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/

相关文章：