vue3+js 如何做一个跳转路由的时候移动端有翻页效果
使用 Vue Router 的 transition 功能可以实现路由切换时的过渡效果,而因为需要翻页效果,所以可以使用第三方的库来实现。
以下是使用 vue-page-transition 库来实现跳转路由翻页的代码:
1.安装 vue-page-transition 库
npm install vue-page-transition --save
2.在 main.js 中引入并使用 vue-page-transition
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VuePageTransition from 'vue-page-transition'
Vue.use(VuePageTransition)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3.在组件中使用 transition 组件包裹路由出口
<transition name="page">
<router-view/>
</transition>
4.在样式中添加 transition 效果
.page-enter-active, .page-leave-active {
transition: transform 0.5s ease-in-out;
}
.page-enter, .page-leave-active {
transform: translateX(100%);
}
.page-leave-to {
transform: translateX(-100%);
}
这样就实现了从右侧翻页进入和离开的效果,可以根据需要自行修改。