vue3+js 如何做一个跳转路由的时候移动端有翻页效果

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%);
}

这样就实现了从右侧翻页进入和离开的效果，可以根据需要自行修改。