vue開發移動端項目 過渡動畫問題

 App.vue: 
  <div id="app">
    <div class="content">
      <transition :name="transitionName" :duration="{ enter: 500, leave: 0 }">
        <router-view class="transitionBody"></router-view>
      </transition>
    </div>
    <Nav v-if="!hideNav"></Nav>
  </div>
 
  css: 
    .transitionBody{
      position: absolute;
      top: 0;
      width: 100%;
      transition: all 0.3s ease; /*定義動畫的時間和過渡效果*/
    }
 
    .transitionLeft-enter,
    .transitionRight-leave-active {
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0);
      /*當左滑進入右滑進入過渡動畫*/
    }
    .transitionLeft-leave-active,
    .transitionRight-enter {
      -webkit-transform: translate(-100%, 0);
      transform: translate(-100%, 0);
    }
 
  js判斷部分
 
    watch: {
      $route (to, from){
        const arr = ['myFans','forgetPwd','dtIncome', 'jtIncome'];
        const compare = arr.indexOf(to.name)>arr.indexOf(from.name);
        this.transitionName = compare ? 'transitionLeft' : 'transitionRight';
      }
    },
相關文章
相關標籤/搜索