Vue路由动画浅入浅出简单实现

Vue路由动画

最近想自己开发一个博客网站，本来想用js jq 原生写，后来发现mvc的框架实在有点强差人意。索性就直接用了vue，然后我又发现一个页面的跳转效果也有点差人意，我就想到vue的路由动画，下面给大家实例一种简单的路由动画。

路由

重新给路由添加下标，在定义路由时添加meta属性，定义index，然后在页面监听路由，根据index的大小决定添加哪种动画。

在route的index.js里面

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{index:0},
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta:{index:1},
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/view/Login.vue'),
    meta:{index:2},
  }
]

在App.vue 中添加

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

使用transition属性包裹路由 然后在watch中监听路由动向 就是判断meta的index大小

<script>
export default {
  name: 'App',
  data(){
      return {
          transitionName: ''
          //设置成空值 路由切换时在进行赋值
      }
  },
 
watch: {
    $route(to, from) {
    //利用watch监听属性来进行样式改变
        if (to.meta.index > from.meta.index) {
            this.transitionName = "slide-left";
        } else {
            this.transitionName = "slide-right";
        }
    }
}
}
</script>

最后在Css中完成最后的动态设置

<style lang="scss">
.child-view {
    position: absolute;
    width:100%;
    transition: all .4s ;
}
.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);
}
</style>

一个简单的路由动画就实现了