我们需要vue内置组件transition,关于用法,详细看vue官方文档
https://cn.vuejs.org/v2/api/#transition
下面用法,附上代码,
定义css
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
transition: all 310ms;
}
//
.content{
position:absolute;
top :0;
left :0;
right: 0;
bottom :0
}
html代码
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="content"/>
</transition>
</div>
</template>
<script>
import "./assets/styles/reset.css";
import "./assets/styles/transiation.less";
import 'amfe-flexible';
export default {
watch:{
$route(to,from){
// console.log("to" + to.meta)
this.changeRoute(to,from)
}
},
}
</script>
<style lang="less" scoped>
#app {
width: 100%;
height:100%;
background-color: #fff;
}
</style>
<style lang="">
</style>
在min.js 配置
Vue.mixin({
data() {
return {
transitionName: ''
}
},
methods: {
changeRoute(to, from) {
if (!isNaN(from.meta.pagesNum)) {
if (to.meta.pagesNum > from.meta.pagesNum) {
this.transitionName = 'slide-left'
} else {
this.transitionName = 'slide-right'
}
}
}
},
})
注意的是,这个方法需要在router里面配置
{
path: '/productDdetails',
redirect: '/product',
component: () =>
import ( /* webpackChunkName: "product" */ '../views/product/product_details.vue'),
children: [{
path: "",
redirect: '/product',
},
{
path: '/product',
meta:{
pagesNum: 2
},
component: () =>
import ( /* webpackChunkName: "product" */ '../views/product/product.vue'),
},
{
path: '/chainDynamics',
meta: {
pagesNum: 4
},
component: ()=>
import ( /* webpackChunkName: "chainDynamics" */ '../views/product/chainDynamics.vue')
},
{
path: '/comments',
meta: {
pagesNum: 4
},
component: ()=>
import ( /* webpackChunkName: "comments" */ '../views/product/comments.vue')
}
]
}
总结起来,就是比较路由里面配置的pagesNum的大小,如果当前路由的pagesNum大于跳转路由的pagesNum,那么向右滑动,相反,向左滑动