Vue移动项目切换页面时不同动画的实现小技巧

一个移动端程序，当切换页面时，通常需要配套一个进入或者渐出动画，与 app 相同，进入默认从右侧滑入，而渐出时往左滑出。

动画实现很简单，比如 vant 自带 slide-left 和 slide-right，在 <transition name="slide-left"> 中就可以直接使用，当然样式也可以自己写，这里不讨论。我们重点说一下如何实现动态判断页面该使用 left 还是 right。

很简单的思路，使用路由判断，当路由使用了 back 进行返回页面操作，就执行渐出的动画。

实现方式很多种，今天说一下我认为比较简单的方案。

• 它改动少，实现快
• 全局统一配置，减少代码量
• 不用在页面或者组件中关注该使用哪种方法

思路：

利用路由中的 meta，添加一个 back 属性（任意属性都可以），当是返回时，就将其值置为 true。切换页面时读取该属性，来判断使用什么动画。

首先，在 App.vue 根组件中监听 $route：

watch: {
    $route(to, from) {
        if (from.meta.back) {
            transitionName = 'slide-right';
        } else {
            transitionName = 'slide-left';
        }
    }
}

然后在 router.js 中配置一下 back 属性即可：

// 修改全局 back 方法，为其路由添加 back 属性，并置为 true
const originalBack = VueRouter.prototype.back;
VueRouter.prototype.back = function back() {
  this.currentRoute.meta.back = true;
  return originalBack.call(this);
};

router.afterEach((to, from) => {
  setTimeout(() => {
    // 等路由切换完毕之后，再将其置为 false，或者删除该属性。setTimeout 是为了确保执行完毕之后再修改属性。
    from.meta.back = false;
  }, 0);
});

这样，只要页面中有返回的地方，直接使用 this.$router.back()，即可默认调用返回的动画，不再需要其他改动。