vue 路由动画过渡效果weixin42479115的博客-

为了增加用户体验，在切换路由时可加动态的过渡效果。
应用场景：

切换如上页面的底部导航栏，添加 动画过渡效果。

1、样式

/*路由切换 animation start */  .slide-left-enter-active,  .slide-left-leave-active {    transition: 0.3s transform ease;    backface-visibility: hidden;    perspective: 1000;  }  .slide-left-enter {    transform: translate3d(-100%, 0, 0);  }  .slide-left-enter-to,  .slide-left-leave {    transform: translate3d(0%, 0, 0);  }  .slide-left-leave-to {    transform: translate3d(100%, 0, 0);  }  .slide-right-enter-active,  .slide-right-leave-active {    transition: 0.3s all ease-out;    backface-visibility: hidden;    perspective: 1000;  }  .slide-right-enter {    transform: translate3d(100%, 0, 0);  }  .slide-right-enter-to,  .slide-right-leave {    transform: translate3d(0, 0, 0);  }  .slide-right-leave-to {    transform: translate3d(-100%, 0, 0);  }  /*路由切换 animation end */ 

2、路由配置

路由配置时，给路由对象加上meta属性，并在meta中加index属性和值，后端监听需要需要用该值来判断

routes: [{         path: '/',//重定向         redirect: '/home',         meta: {             index:1         }     }, {         // 首页         name: 'home',         path: '/home',         meta: {             index:2         },         component: Home,     }, {         // 分类         name: 'classify',         path: '/classify',         meta: {             index:3         },         component: Classify     }, {         // 我的         name: 'mine',         path: '/mine',         meta: {             index:4         },         component: Mine     },{         // 吃饭吧         name:'eat',         path:'/eat',         meta: {             index:7         },         component:Eat     },{         // 购物车         name:'cart',         path:'/cart',         component:Cart,         meta: { requiresAuth: true,index:10 }     }] 

3、在App.vue中添加动态指令并监听路由

（1）给路由添加动态指令 ，并给个名字

<div id="app">     <transition :name="transitionName">       <router-view></router-view>     </transition>     <Footer></Footer>   </div> 

（2）监听路由
根据路由对象的index值来进行比较，给当前路由页面动态指令添加对应的类名

watch:{     $route(to,from){       console.log(to,77);       console.log(from,88);       const fromIndex=from.meta.index       const toIndex=to.meta.index       if (toIndex > fromIndex) {         this.transitionName = 'slide-right'       } else if (toIndex < fromIndex) {         this.transitionName = 'slide-left'       } else {         this.transitionName = ''       }     }   }