zoukankan      html  css  js  c++  java
  • vue-router transition 路由切换效果

    所需更改文件  App.vue

     1 //template结构:
     2 
     3 <template> 
     4   <div id="app"> 
     5     <div id="nav">
     6       <router-link to="/come">Come</router-link>
     7     </div>
     8   <transition :name="transitionName"> 
     9       <router-view class="child-view"></router-view> 
    10   </transition> 
    11   </div> 
    12 </template>
    13 
    14 //script结构:
    15 
    16 <script> 
    17 
    18 export default { 
    19   name: 'app', 
    20   data () { 
    21     return { 
    22       transitionName: 'slide-left' 
    23     } 
    24   }, 
    25 mounted () { 
    26 },
    27 
    28 //监听路由的路径,可以通过不同的路径去选择不同的切换效果 
    29 watch: {
    30   '$route' (to, from) {
    31   //    console.log('现在路由:',to.path.split('/')[1],'来自路由:',from.path.split('/')[1],'现在的动画:',this.transitionName)
    32     const toDepth = to.path.split('/').length
    33     const fromDepth = from.path.split('/').length
    34     this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    35     }
    36   }
    37 
    38 } 
    39 </script>
    40 
    41 //style结构:
    42 
    43 <style>
    44 
    45 .child-view { 
    46   margin: 300px auto; 
    47    100%; 
    48   height: 100%; 
    49   transition: all .5s cubic-bezier(.55,0,.1,1); 
    50 } 
    51 .slide-left-enter, .slide-right-leave-active { 
    52   opacity: 0; 
    53   -webkit-transform: translate(30px, 0); 
    54   transform: translate(30px, 0); 
    55 } 
    56 .slide-left-leave-active, .slide-right-enter { 
    57   opacity: 0; 
    58   -webkit-transform: translate(-30px, 0); 
    59   transform: translate(-30px, 0); 
    60 }
    61 </style>

      如需交流可加博主QQ:602697966(备注博客园)

  • 相关阅读:
    根据IP地址查找MAC地址
    MongoDB导入导出以及数据库备份
    本地mongodb数据库导出到远程数据库中
    datatable自动增加序号
    IDEA出现无法加载主类
    远程连接本地mongodb 数据库
    js将后台传入得时间格式化
    Java蓝桥杯--基础练习 (6)回文数
    Java蓝桥杯--基础练习(5)杨辉三角形
    Java蓝桥杯--基础练习(4)查找整数
  • 原文地址:https://www.cnblogs.com/yzyh/p/7298038.html
Copyright © 2011-2022 走看看