Vue-router结合transition实现app动画切换效果

Vue-router结合transition实现app动画切换效果

1、配置路由页面增加配置
给路由添加一个goBack方法。

import Vue from 'vue'

Router.prototype.isBack = true

Router.prototype.goBack = function () {
  this.isBack = true
  window.history.go(-1)
}

Vue.use(Router)

2、在路由页面监听路由变化（是前进还是后退）

<template>
    <div id="app">
        <transition :name="transitionName">
            <router-view class="body-wrap"/>
        </transition>
    </div>
</template>
<script>
export default {
  data () {
    return {
      transitionName: 'slide-right'
    }
  },
  watch: {
    $route () {
      let isBack = this.$router.isBack
      if (isBack) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      this.$router.isBack = false
    }
  }
}
</script>

3、添加路由动画

<style>
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active
        will-change transform
        transition all .3s
        position absolute

    .slide-right-enter
        transform translate3d(-100%, 0, 0)

    .slide-right-leave-active
        transform translate3d(100%, 0, 0)

    .slide-left-enter
        transform translate3d(100%, 0, 0)

    .slide-left-leave-active
        transform translate3d(-100%, 0, 0)
</style>

4、路由前进的时候按正常方法走就行了。

5、后退的时候调用goBack方法就OK。

this.$router.goBack()