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';
      }
    },
上一篇:如何实现从Java入门到服务端项目开发的进阶?


下一篇:laravel5.4 表单提交