vue-cil项目APP左右翻页效果实现

• App.vue (页面)

  <transition :name="pageAnimate" :duration="{ enter: 1000, leave: 1000 }">
      <router-view/>
  </transition>
  

• App.vue (CSS)

  /***（过度开始）***/
  .forward-enter,
  .forward-leave {
    transform: translateX(100%); 
  }
  .back-enter,
  .back-leave {
    transform: translateX(-100%); 
  }
  /***（过度进行中）***/
  .forward-enter-active,
  .forward-leave-active,
  .back-enter-active,
  .back-leave-active, {
    transition: all 1s;
  }
  /***（过度结束）***/
  .forward-enter-to {
    transform: translateX(0); 
  }
  .forward-leave-to, {
    transform: translateX(-100%); 
  }
  .back-enter-to {
    transform: translateX(0); 
  }
  .back-leave-to {
    transform: translateX(100%); 
  }
  
  //备注
  每个页面的容器必须设置定位（星星）
  .box{position: fixed; top: 0; bottom: 0; left: 0; right: 0;}
  

• App.vue (监控路由)

  export default {
    name: 'App',
    data(){
      return {
        pageAnimate: 'back'
      }
    },
    watch:{
      $route(to,from,d){
        // 路由切换翻页效果
        if(this.$store.state.historyRouter.includes(to.path)){
          this.pageAnimate = 'back'
        }else {
          this.pageAnimate = 'forward'
        }
        //保存路由
        let historyRouter = this.$store.state.historyRouter;
        let routerMaxLen = this.$store.state.routerMaxLen;//路由最大长度
        if(!historyRouter.includes(to.path)){
            historyRouter.push(to.path)
        }
        if(historyRouter.length > routerMaxLen){
            historyRouter.splice(0,1)
        }
        this.$store.dispatch('changeState', {attr: 'historyRouter', params: historyRouter})
      }
    },
  }
  

• VueX store.js(设置路由缓存)

  export default new Vuex.Store({
      state: {
          historyRouter: [],//所有访问过的路由
          routerMaxLen: 3,//路由最大长度
      },
      mutations: {
          //state改变
          changeState(state,{ attr,params }){
              state[attr] = params;
          }
      },
      actions: {
          //state改变
          changeState({ state },{ attr,params }) {
              state[attr] = params;
          },
      },
      getters: {
          
      },
      modules: {
  
      }
  })
  

附: 翻页动画css

@keyframes fold-left-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fold-left-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
/* 右进 */
@keyframes fold-right-in {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
} 

@keyframes fold-right-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}