VUE路由转场特效，WebAPP的前进与后退

一、效果图

二、思路

1. 定义两个 CSS 过度动画，前进与后退： slide-right-enter 和 slide-left-enter

2. 给路由配置meta信息，设置各个路由的级别： index

3. 监控路由跳转，比对 meta 信息级别，如果从大跳转到小说明是返回，从小跳转到大则是前进

身为前端老司机，还是得分享些干货精品学习资料的，前端资料获取方式：

1.在你手机的右上角有【关注】选项，点击关注！

2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】

已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~

三、具体代码

APP.vue

<template>
 <div id="app">
 <transition :name="transitionName">
 <router-view/>
 </transition>
 </div>
</template>
<script>
export default {
 name: 'app',
 data () {
 return {
 transitionName: ''
 }
 },
 watch: {
 $route (to, from) {
 if (to.meta.index > from.meta.index) {
 this.transitionName = 'slide-left'
 } else {
 this.transitionName = 'slide-right'
 }
 }
 }
}
</script>
<style lang="scss">
#app {
 color: #2c3e50;
}
//转场动画
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 // 启用硬件加速
 will-change: transform;
 transition: all 300ms;
 position: fixed;
}
.slide-right-enter {
 transform: translate(-100%, 0);
 transition-timing-function: ease-in;
}
.slide-left-enter {
 transform: translate(100%, 0);
 transition-timing-function: ease-in;
}
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
 // mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: { index: 1 }
 },
 {
 path: '/publish',
 name: 'publish',
 component: () => import('./views/Publish.vue'),
 meta: { index: 2 }
 },
 {
 path: '/personal',
 name: 'personal',
 component: () => import('./views/Personal.vue'),
 meta: { index: 2 }
 }
 ]
})