vue-router之导航切换过渡动画

在上一篇vue-router篇制作了一个小demo,简单的单页应用，博客雏形。考虑到切换有些生硬，在这里加上动效提高用户体验。

过渡动效

提供了transition的封装组件，添加过渡动画，通过添加或删除css类名来实现。

过渡的css类名：

v-enter　　进入过渡的开始状态

v-enter-active　　进入活动状态

v-enter-to　　进入的结束状态

v-leave　　离开过渡的开始状态

v-leave-active　　离开活动状态

v-leave-to　　离开结束状态

过渡模式：

in-out　　先进后出

out-in　　先出后进

用法：

做一个淡隐淡出效果

把想要运动的元素放到<transition></transition>里面，设置模式。

    <transition mode="out-in">
      <router-view class="center"></router-view>
    </transition>

在style里写动效：

  .v-enter{
    opacity: 0;
  }
  .v-enter-active{
    transition: 0.5s;
  }
  .v-enter-to{
    opacity: 1;
  }
  .v-leave{
    opacity: 1;
  }
  .v-leave-to{
    opacity:0;
  }
  .v-leave-active{
    transition: 0.5s;
  }

就ok啦！

动态设置name

再做一个x轴向左和向右滑动进入消失效果。

  .left-enter{
    transform:translateX(100%);
  }
  .left-enter-to{
    transform:translateX(0);
  }

  .left-enter-active{
    transition: 1s;
  }
  .left-leave{
    transform:translateX(0);
  }
  .left-leave-to{
    transform:translateX(-100%);
  }
  .left-leave-active{
    transition: 1s;
  }

在transition标签中用name动态设置效果。此时要删掉mode="out-in"能自然衔接。

<transition name="left">
      <!--<router-view name="slider"></router-view>-->
      <router-view class="center"></router-view>
 </transition>

向右切换：

.right-enter{
    transform:translateX(-100%);
  }
  .right-enter-active{
    transition: 1s;
  }
  .right-leave-to{
    transform:translateX(100%);
  }
  .right-leave-active{
    transition: 1s;
  }

要想实现左边的向左，右边的向右切换呢

路由元信息

在路由配置中meta可以配置一些数据，用在路由对象中。

访问meta中的数据：$route.meta

也就是说，除了提供的路由配置信息，我们还可以通过meta来自定义想要的数据。

 

实现左边的向左，右边的向右切换：

step1：给每个组件分别加上index，如果目标路由的index大就向右滑动，否则向左。

meta:{
        index:0
      }

0,1,2,3这样。

step2：监控路由信息对象（上一篇文章中讲过原因），可以拿到离开的和目标的index

  watch:{
    $route(to,from){
      console.log(to.meta.index);//目标导航下标
      console.log(from.meta.index);//离开导航下标
    }
  }

step3:拿下标，比较设置class名称

watch:{
    $route(to,from){
      if(to.meta.index<from.meta.index){
        this.names="right"
      }else{
        this.names="left"
      }
    }
  },
  data(){
    return{
      index:'/home',
      names:'left'
    }
  }