Vue Tab切换滑动过渡效果,APP侧滑效果

先来看下效果手机扫码

http://yhq.leizhenxd.com/

啥都不说 喜闻乐见上代码

App.vue

<template>
  <div id="app">
    <transition :name="transitionName"  mode="in-out">
      <keep-alive>
        <router-view/>
      </keep-alive>
    </transition>


    <div id="nav">
      <router-link to="/index.html">...</router-link>
      <router-link to="/optimus.html">...</router-link>
      <router-link to="/gao.html">...</router-link>
    </div>
  </div>
</template>

<script>
  export default{
      data(){
          return{
              transitionName:'left'
          }
      },

      watch:{
          '$route' (to, from) {
              if(toIdx < 10 && fromIdx < 10){
                  this.transitionName = ''
              }
              else if(toIdx > 10) {
                  this.transitionName = 'left'
              }
              else if(fromIdx>10 && toIdx<10) {
                  console.log("right")
                  this.transitionName = 'right'
              }
          }
      }
  }
</script>

router/index.js

const routes = [
    
    {
      path: '/index.html',
      name: 'Home',
      meta:{index:1},
      component: Home
    },
    {
        path: '/optimus.html',
        name: 'Optimus',
        meta:{index:2},
        component:Optimus
    },
    {
        path: '/gao.html',
        name: 'Gao',
        meta:{index:3},
        component:Gao
    }
]

style.css 是重点

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

.left-enter-active{
  transition: .5s;
}


.right-leave{
  z-index:100;
  transform:translateX(0);
}
.right-leave-to{
  z-index:100;
  transform:translateX(100%);
}

.right-leave-active{
  z-index:100;
  transition: .5s;
}

重要的一点需要切换的router-view中的每个template根元素需要设置position:absolute;否则切换效果则不会出现下层不动上层慢慢覆盖的效果。而是每次滑动的时候下层一片空白

Gao.vue

<template>
  <div class=""  style="position:absolute">
    ...
  </div>
</template>