Vue路由左右切换动画效果

首先在router里面的每个路由的meta里面配置index，用作你是向左还是向右切换。

            {
                path: '',
                name: 'index',
                component: () => import('@/components/index.vue'),
                meta: {
                    index: 0
                }
            },
            {
                path: 'home',
                name: 'home',
                component: () => import('@/components/home.vue'),
                meta: {
                    index: 1
                }
            },
            {
                path: 'message',
                name: 'message',
                component: () => import('../components/message.vue'),
                meta: {
                    index: 2
                }
            }

然后在路由router-view动态添加name名字。

   <transition :name="transitionName">
        <router-view />
   </transition>

在data中定义transitionName名字

    data () {
        return {
            transitionName: 'transitionRouterLeft',
        };
    },

使用watch进行监听路由meta里面的index进行动态切换名字。

    watch: {
        '$route' (to, from) {
            if (to.meta.index > from.meta.index) {
                this.transitionName = 'transitionRouterLeft';
            } else {
                this.transitionName = 'transitionRouterRight';
            }
        }
    },

在css中添加动画

.transitionRouterLeft-enter-active,
.transitionRouterLeft-leave-active {
    transition: all 0.4s;
    opacity: 1;
}
.transitionRouterLeft-enter,
.transitionRouterLeft-leave {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.transitionRouterRight-enter-active,
.transitionRouterRight-leave-active {
    transition: all 0.4s;
    opacity: 1;
}
.transitionRouterRight-enter,
.transitionRouterRight-leave {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}