Vue实现H5页面左右切换动画

整体思路：采用Vue transition实现动画，在路由配置加上meta属性，用来判断是前一页还是后一页，前进的时候页面向左滑动，后退的时候页面向右滑动，所以要用两套动画实现，meta属性就用来判断用的是前进动画还是后退动画，直接上代码。

Vue入口文件，index.vue

<template>
  <div id="app">
    <transition :name="isGoNext">
      <router-view></router-view>
    </transition>
  </div>
</template>
export default { 
   
  data() { 
   
    return { 
   
      viewMeta : 0,
      isGoNext : 'loan-go',
    }
  },
  watch: { 
   
    '$route.matched': function (newVal, oldVal) { 
   
      let meta = this.$route.matched[0].meta;
      this.isGoNext = meta >= this.viewMeta ? 'loan-go' : 'loan-back'
      this.viewMeta = meta
    }
  },
  mounted(){ 
   
    this.viewMeta = 1
  }
};
</script>
<style lang="scss">
@import "@/style/public/publicStyle.scss";
</style>

transition动画 publicStyle.scss文件

html,body,#app { 
   
  height: 100%;
  background: #fff;
  font-family: '微软雅黑','MicrosoftYaHei', Helvetica, Arial, sans-serif;
}
.loan-go-enter-active, 
.loan-go-leave-active, 
.loan-back-enter-active, 
.loan-back-leave-active { 
   
  transition: all 0.3s;
}
.loan-go-enter , .loan-back-leave-to{ 
   
  position: fixed;
  transform: translateX(100%);
}
.loan-back-enter , .loan-go-leave-to{ 
   
  position: fixed;
  transform: translateX(-100%);
}

在路由里面配置meta属性，用来判断页面的先后顺序，routers/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    { 
   
        path: '/',
        name: 'MyLoan',
        component: () => import( '@/views/my_loan/MyLoan.vue'),
        meta:1
    },
    { 
   
        path: '/ApplyForLoan/:lenderPhone/:outNetToken/:misToken/:terminal',
        name: 'ApplyForLoan',
        props:true,
        component: () => import( '@/views/my_loan/ApplyForLoan.vue'),
        meta:2
    },
    { 
   
        path: '/Success/:successType',
        name: 'Success',
        props:true,
        component: () => import( '@/views/my_loan/Success.vue'),
        meta:3
    },
    { 
   
        path: '/LoanDetails/:dataId/:terminal/:misToken',
        name: 'LoanDetails',
        props:true,
        component: () => import( '@/views/my_loan/LoanDetails.vue'),
        meta:4
    },
];

const router = new VueRouter({ 
   
  routes
})

export default router;