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コード

	

	
	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)
			}
		},
	}

	

	

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より大きい場合は右へスライドし,逆に左へスライドする.