<template>
  <div id="app">
    <!--<transition :name="transitionName">
      <router-view class="Router" />
    </transition>-->
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      transitionName: 'slide-right' // 初始过渡动画方向
    }
  },
  watch: {
    /* $route(to, from) {
      // 切换动画
      var isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      if (isBack) {
        this.transitionName = 'slide-left'
      } else {
        this.transitionName = 'slide-right'
      }
      this.$router.isBack = false
    } */
  }
}
</script>

<style lang="scss">
  #app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;

    .Router {
      height: 100%;
      transition: all .377s ease;
      will-change: transform;
      top: 0;
      backface-visibility: hidden;
      perspective: 1000;
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(100%, 0 ,0);
    }
  }

</style>
