列表页进入详情页的动画效果

请观赏

<transition :name="transitionName">
  <keep-alive include="HelloWorld" exclude="detail">
        <router-view class="Router"></router-view>
  </keep-alive>
 </transition>

data(){
    return{
        foo:true,
        transitionName: 'slide-right'
    }
}

watch: {
        '$route' (to, from) {
          console.log(to)
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;if(to.name=='HelloWorld') {
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;this.transitionName = 'slide-right'
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;} else if(to.name=='detail'){
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;       this.transitionName = 'slide-left'
    &emsp;&emsp;&emsp;&emsp;&emsp;  }
    &emsp;&emsp;}
}
/////样式
.Router{
  position: absolute;
  width: 100%;
  transition: all 1s ease;
}
.slide-left-enter,
.slide-right-leave-active {
     opacity: 0;
    transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
     opacity: 0;
    transform: translate(-100%, 0);
}