vue transition切换效果

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive :exclude="excludeList">
        <router-view/>
      </keep-alive>
    </transition>
      <div class="loading-pop" v-if="loading">
          <loading v-show="loading"/>
      </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
// import { toShare } from './utils/wxshare'
import loading from './components/tkloading'
export default {
    name: 'App',
    computed: {
        ...mapState(['loading'])
    },
    data () {
        return {
            transitionName: '',
            excludeList: ['internalActivityHomePage', 'internalActivityHome', 'homePage', 'Home', 'editTrack', 'editCustomerInformation', 'policyDetail', 'internalActivityQuestion', 'internalCustomerDetail']
        }
    },
    components: {
        loading
    },
    created () {
        console.log('环境', process.env.NODE_ENV)
        // const userInfo = localStorage.getItem('userInfo')
        // if (userInfo && userInfo !== 'undefined') {
        //     this.$store.commit('userInfo', JSON.parse(userInfo))
        // }
        // toShare({})
        // console.log('this.loadingM(false)')
        this.loadingM(false)
    },
    methods: {
        ...mapMutations({ loadingM: 'loading' })
    },
    watch: {
        $route (to, from) {
            if (to.meta.index > from.meta.index) {
                this.transitionName = 'slide-left'
            } else {
                this.transitionName = 'slide-right'
            }
        }
    }
}
</script>

<style lang="less">
  body{
    max-width: 750px;
    margin: 0 auto;
    font-size: 14px;
    background: #F5F5F5;
    color: #333;
  }
  #app {
    max-width: 750px;
    margin:0 auto;
  }
  #nav {
    padding: 30px;

    a {
      font-weight: bold;
      color: #2c3e50;
      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
  .slide-left-enter {
      transform: translateX(100%);
  }

  .slide-right-enter {
      transform: translateX(-100%);
  }

  .slide-left-enter-active,
  .slide-right-enter-active {
      position: relative;
      z-index: 999;
      transition: all 0.4s;
  }

  .slide-left-leave-active,
  .slide-right-leave-active {
      position: relative;
      z-index: -1;
  }
  .loading-pop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 150vh;
      padding-top: 40vh;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      z-index: 100;
  }
</style>