Vue tab switch sliding transition effect, APP sideslip effect

Time:2021-3-5

Let’s see the effect first
https://yhq.leizhenxd.com/
Vue tab switch sliding transition effect, APP sideslip effect
Say nothing, love to see and hear the code

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 That’s the point
`

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

`
It is important to set each template root element in router view that needs to be switched position:absolute; Otherwise, the switching effect will not appear the effect that the lower layer does not move and the upper layer slowly covers. But every time you slide, there’s a blank underneath

Gao.vue
`

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

`