transform.vue

<template>
  <div id="app">
    <div class="nav_box">
      <ul>
          <router-link :to="{name:'home'}" exact='exact' class="nav_list_lk" tag="li">home</router-link>
        <router-link to="/about" class="nav_list_lk" tag="li">about</router-link>
          <router-link :to="{name:'document'}"  class="nav_list_lk" tag="li">document</router-link>
          <router-link to="/user" class="nav_list_lk" tag="li">user</router-link>
      </ul>
    </div>
    {{ $route.meta.index}}
    <transition :name="names">
      <router-view></router-view>
    </transition>
  <!--  out-in 当前元素先过渡,新元素后过渡
    in-out 新元素先进行过渡,完成后 当前元素进行过度
    name 查找自定义的  V
    $route.meta 路由元信息,
        <transition name="left" mode="in-out">
      <router-view></router-view>
    </transition>
    -->
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      names:'left'
    }
  },
  watch: {
    $route(to,from){
    /*  routes: [
        {
          meta: {
            index: 0
          },
          path: '/',*/
      console.log(to.meta.index)
      console.log(from.meta.index)
      if(to.meta.index < from.meta.index){
        this.names='right'
      }else{
        this.names='left'
      }
    }
  }
}
</script>
<style>
  /*v可以自定义,后面是固定的  .zf-enter  name 查找自定义的  V */
  .v-enter{opacity:0;}
  .v-enter-to{opacity:1;}
  .v-enter-active{transition:1s;}
  .v-leave{opacity:1;}
  .v-leave-to{opacity:0;}
  .v-leave-active{transition:.5s;}

  .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;}

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