修身养性,知行合一

  • 首页
  • 爱码
    • 系统
    • 数据库
    • JavaScript
    • CSharp
    • Python
  • 生活
    • 文化
    • 美食
  • 杂谈
  • 关于
修身养性,知行合一
码字,杂谈
  1. 首页
  2. 爱码
  3. 前端
  4. JavaScript
  5. 正文

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

2022年9月30日 297点热度 0人点赞 0条评论

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

file

动画实现很简单,比如 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(),即可默认调用返回的动画,不再需要其他改动。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: JavaScript vue
最后更新:2022年9月30日

jeremyjone

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
关于 *.vue 文件中使用 TypeScript 声明类型报错的解决方案 element table 加载时宽度闪烁问题 windows 无法登录便签、OneNote等应用 vue2 中 vuex 对 ts 的支持 封装一个极简的右键菜单 vue2 使用 @vue/composition-api 的一些问题
JavaScript 之 canvas(五)-- 椭圆、橡皮 Vuex之Getters详解 歌曲分享--爱得太迟 .net core 3.x 使用NLog输出日志到文件 真丶深入理解JavaScript异步编程(二):Promise 原理 MySql中timestamp创建日期的时区问题

(っ•̀ω•́)っ✎⁾⁾ 开心每一天

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号