基于vue-router的页面切换动画

基于vue-router，可以做出媲美原声app的一个动画切换效果

上代码

<template>
  <div id="app">
    <transition :name="name" >
      <router-view class="router"/>
    </transition>
  </div>
</template>
<script>
  export default {
    name: 'App',
    data(){
      return {
        name:"left-fade",
      }
    },
    watch:{
      '$route':function(){
        if(this.$router.isBack){
          this.name="right-fade";
          this.$router.isBack=false;
        }else{
          this.name="left-fade";
        }
      }
    },
    created(){
    },
  }
</script>

<style>
  .router{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    transition:  all cubic-bezier(.55,0,.1,1)   .5s ;
  }

  .left-fade-leave-to{
    transform: translateX(-100%);
  }
  .left-fade-enter{
    transform: t