vue路由过渡动画效果

template：

<template>
  <div id="app">
    
    <transition :name="transitionName">
    <router-view class="Router" />
 
    </transition>
  </div>
</template>

scripit 监听路由

export default {
  name: 'App',
  data() {
    return {
   
      　　　transitionName: ''  // 默认动态路由变化为slide-right
    }
  },
  mounted() {
  },
    watch: {
   $route(to, from) {
  //    console.log("去"+to.meta.index)

  // console.log("来"+from.meta.index)
  if(from.meta.index == undefined){
    from.meta.index ='0'
  }
// 　　　　let isBack = this.$router.isBack  //  监听路由变化时的状态为前进还是后退
  
       if(to.meta.index > from.meta.index) {
　　　　　　　　this.transitionName = 'slide-left'
　　　　　　} else {
　　　　　　       this.transitionName = 'slide-right'
　　　　　}
　
　　}
　  }
}

css 动画效果


.Router {
     position: absolute;
     width: 100%;
     transition: all .5s ease;
     top:0;
}

.slide-left-enter,
 .slide-right-leave-active {
     opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
     opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
}

router index 给路由定义一个级别 meta:{index:0}, index由小到大由低到高

```

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: Nav,
meta:{index:0},
},
{
path:"/city",
component:Ty,
meta:{index:1},
},
{
path:"/zg",
component:Zhaogong,
meta:{index:2},
},
{
path:"/zgtype",
component:Zgtype,
meta:{index:3},
},
{
path:"/jobdetile",
component:Jobdetile,
meta:{index:4},
}
]
})

vue路由过渡动画效果

猜你喜欢