基于Vue实现页面跳转时的“滑动切换效果”

在移动端原生应用中，页面之间的跳转会以“滑动”的方式进行切换，展示效果极佳，那么能不能在我们的webApp项目中也能实现相应的效果呢？是可以的。下面我们就以在vue中的应用为例，来看一下它具体实现的逻辑吧。

可能您对我说的这个效果还不是很了解，您可以访问这个网站，进行相应的页面切换操作，具体来感受一下。

进入时的场景

离开时的场景

我们可以看到

进入时，要进入的和要移出的页面均是从右向左推的。
离开时，要进入的和要移出的页面均是从左向右推的。

理解了上述的过渡效果，我们就可以设计我们具体的业务逻辑了。

一、页面过渡效果的实现逻辑

       1、创建动画css。
       2、判断当前是需要执行动画（进入页面）还是后退动画（后退页面）
           监听路由对象$route
           让页面跳转的时候，携带包含跳转标记的 param,通过对 param中跳转标记的判断，来判断当前是否为跳转动画。
           如果说param包含跳转标记，那么当前为跳转动画,否则当前为后退动画。
       3、通过transition的方式来为route-view指定对应的动画效果。

三、实现页面间滑动切换效果

在vue中实现这样的功能还是有天然的优势的，因为我们使用vue进行开发时一般会选择SPA（单页应用）的开发模式，就是在运行的时候，要切换的的页面主体结构（可能存在异步加载资源的过程）都在一个页面中，这样就很容易实现我们的滑动效果。若果不采用SPA这种方式进行开发，那该如何呢？我这里也没有做过尝试，但是很早之前有书上说可以设置``HTML的meta```标签来实现,具体的您可以自行查阅一下。

在vue-router中提供了状态过渡这样的效果，就是让你在进行页面（组件）间跳转的时候可以实现一些过渡效果。不过遗憾的是，它上面的实例都有一定的难度。所以我也不打算使用它的示例来进行说明。

1、设置切换时的css动画样式

  // push 页面时：新页面的进入动画
@keyframes fold-left-in{
    0% {
       transform: translate(100%, 0);
    }
    100% {
      transform: translate(0,0)
    }
  }
  // push 页面时：原页面的退出动画
@keyframes fold-left-out{
    0% {
       transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%,0)
    }
  }
  // 后退页面时： 即将展示页面的动画
@keyframes fold-right-in{
    0% {
       transform: translate(-100%, 0);
    }
    100% {
      transform: translate(0,0)
    }
  }
// 后退页面时： 后退页面的动画
@keyframes fold-right-out{
    0% {
       transform: translate(0, 0);
    }
    100% {
      transform: translate(100%,0)
    }
  }

如果您理解了前面分析动画运行的轨迹，那么上面css的样式就相对很好理解。

2、设置跳转标记

本篇文章中，我们只设计了Home和About页面之间的跳转。下面是两个页面相应的跳转逻辑。
Home组件

methods: {
  toggle(){
     this.$router.push({
           name: 'About',
           params: {
             routerType: 'push'
           }
      })
   }
}

About组件

methods: {
      toggle(){
        this.$router.go(-1)
      }
}

Home组件携带了跳转标记push,会使用fold-left动画,而About组件没有携带跳转标记,会使用fold-right动画。

3、实现滑动跳转逻辑(App.vue)

修改模版

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

创建数据

data(){
      return {
        transitionName: 'fold-left'
      }
}

监听路由对象，决定使用哪种过渡效果

watch: {
      // 监听路由对象，决定使用哪种过渡效果
      '$route'(to, from){
        // 获取到携带的标记
        const routerType = to.params.routerType
        if(routerType === 'push'){
          // 跳转页面
          this.transitionName = 'fold-left'
        } else{
          // 后退页面
          this.transitionName = 'fold-right'
        }
      }
}

整体的逻辑就是通过判断就你要跳转到的路由是否函数跳转跳转标记const routerType = to.params.routerType，然后动态的改变transitionName的值，进而响应<router-link/>的<transition>过渡效果的名称。
整体的逻辑设计到这里就差不多了，但是但我们切换的时候会存在一个问题，两个页面之间有空白的区域，这是什么原因造成的呢？前面分析过，当前的这种方式只适合SPA开发模式，我们当前的每一个页面的节点.home、.about之间是按照正常流的方式排列的。所以会存在这样的问题，怎么解决呢，我们只需要让他们脱离文档流，显示在同一行上面。那就只需要添加下面的css属性：

.home{
  position:absolute;
  width:100%;
  height: 100%;
}
.about{
  position:absolute;
  width:100%;
  height: 100%;
}

至此，我们的滑动效果就实现了。此处代码间文件配合较多，我就不将代码一一列出，请您注意分析过程。感谢您的阅读！