Vue 组件切换的时候，带动画效果，为什么我的只是向一个方向呢？ 我想进去的时候从右往左，返回的时候从左往右边

Question

App.vue

               <transition :name="transitionName"> 
                     <router-view class="Router"></router-view>
                </transition>
                

　 data() {
　　　　 return {
　　　　　　transitionName: 'slide-right' // 默认动态路由变化为slide-right
　　 　　}
　 　},
　 　watch: {
　　　 '$route' (to, from) {
　　　 　let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
　　　　 　　if(isBack) {
　　　　　　　　this.transitionName = 'slide-right'
　　　　 　　} else {
　　 　　　　 this.transitionName = 'slide-left'
　　　　 　}
　　this.$router.isBack = false
　 　}
　 }
　

  <style>
  
  .Router {
   position: absolute;
    width: 100%;
   transition: all .8s ease;
    top: 40px;
  }

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

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

</style>

Answer 1

无量寿佛，具体问题具体分析了，你的跨域403问题解决了没