vue实现app页面切换动画效果实例

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)Router.prototype.goBack = function () { this.isBack = true window.history.go(-1)}const router = new Router({ routes: [  {   path: '/',   name: 'PageTransition',    component: PageTransition, // 引入页面切换组件   children: [{    path: '',    component: Index // 父路由访问页面，例如，访问www.aaa.com/ 显示的是Index组件   }, {    path: '/pageA',    component: PageA // 子路由组件 例如，访问www.aaa.com/pageA 显示为PageA   }, {    path: '/pageB',    component: PageB // 子路由组件 例如，访问www.aaa.com/pageB 显示为PageB   }]  } ]})

//templete  <transition name='transitionName' keep-alive>    <router-view></router-view>  </transition>//script  beforeRouteUpdate(to,from,next){    let isBack = this.$router.isBack;    if( isBack ){      this.transitionName = 'slide-right'    }else{      this.transitionName = 'slide-left'    }    this.$router.isBack = false;  }//style.slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(50px, 0); transform: translate(50px, 0);}.slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0);}

<div class="left" @click="goback"><</div>methods: {  goback () {   this.$router.goBack()  } }