zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Samba服务器搭建
    Nginx优化
    Nginx配置
    LNMP环境搭建
    mysql主从同步
    Linux系统文件权限体系详解
    强大的grep,sed和awk--用案例来讲解
    Linux中关机,重启,注销命令
    如何解决一个问题(一)
    Linux基础命令讲解(二)
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12798037.html
Copyright © 2011-2022 走看看