transform.vue 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>