关于webapp路由跳转 页面切换动画

我们需要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，那么向右滑动，相反，向左滑动