vue路由切换的动画

原理：在定义路由时添加meta属性，定义index，然后在页面监听路由，根据index的大小决定添加哪种动画，

具体：

{
    path: '/',
    name:'home',
    component: Home,
    meta: {
      index: 1
    },
},
{
   path: '/search',
  name: 'search',
  component: Search,
  meta: {
    index: 2
  },

},

 使用

<template>
    <div id="video">
        <transition :name="transitionName">
            <keep-alive include="home">
                <router-view class="child-view"> </router-view>
            </keep-alive>
        </transition>
        <vfooter v-if="isShow" />
    </div>
</template>

 默认动画

    data () {
        return{
            transitionName: 'slide-left'
           
        }
    },

监听路由

watch: {
    $route(to, from) {
        // console.log(to.meta.index,from.meta.index)
        if (to.meta.index > from.meta.index) {
            this.transitionName = "slide-left";
        } else {
            this.transitionName = "slide-right";
        }
    }
}，

定义路由动画

<style lang="scss" >
@import './src/style/reset.scss';
.child-view {
    position: absolute;
    width:100%;
    transition: all .4s ;
}
.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
</style>