vue页面切换项目实现转场动画的方法


Posted in Javascript onNovember 12, 2019

前言

移动端, 使用vue为了良好的用户体验, 会需要实现APP形式的切换页面的左滑和右滑效果

实现原理, vue的过渡 & 动画

技术栈: vue + vue-router

解决思路

区分前进 和 后退的路由

网上搜索的资料, 找到了两种

监听popstate事件

window.addEventListener('popstate', function (e) {
  // 用来判断是否是后退, 在判断后需要在其他地方重置
  router.isBack = true
},false)

在注册路由的时, 添加 meta对象 ( 路由元信息)中添加索引, 这样做就需要注意索引的大小(这里使用这一种方式)

{
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登录",
    keepAlive: false,
    index: 1
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前进",
    keepAlive: true,
    index: 2
   }
  },

根据切换方向设置不同的动画效果(通过给transtion内置组件不同的name选项)

方案

路由注册

{
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登录",
    keepAlive: false, // 用来判断是否缓存, 当判断为缓存时, 则路由信息的name和组件的name选项需一致
    index: 1, // 通过比较不同的索引, 来判断是前进动画还是后退动画
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前进",
    keepAlive: true,
    index: 2
   }
  },

在App.vue(根组件)中, 判断动画方向

<template>
 <div id="project">
   <!-- 
   <keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>
   这种情况下, 
   :include: 因为若是使用transition包裹两个keep-alive, vue会出现报错
        用两个transition分别包裹keep-alive, 会让transition的动画name出现问题
 --> 
  <transition :name="transitionName">
   <keep-alive :include="cachedViews">
    <router-view :key="1"></router-view>
   </keep-alive>
  </transition>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {
   transitionName: "slide-right", // 初始过渡动画方向
   cachedViews: [] // 缓存组件
  };
 },
 components: {},
 created() {},
 watch: {
  $route(to, from) {
   if (to.meta.keepAlive && !this.cachedViews.includes(to.name)) {
    // 将需要缓存的组件信息, 添加进其中, 其中to.name的值应该和匹配组件的name选项一致
    this.cachedViews.push(to.name);
   }
   //如果to索引大于from索引,判断为前进状态,反之则为后退状态
   if (to.meta.index > from.meta.index) {
    //设置动画名称
    this.transitionName = "slide-left";
   } else {
    this.transitionName = "slide-right";
   }
  }
 },
 methods: {}
};
</script>


<style lang="scss" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 0.5s;
 <!-- 
  这个是必须的, 是为了让页面脱离文档流, 不然的话, 后进入的页面会从页面底部出来
  这个定位会直接添加到路由匹配的组件根元素上, 所以页面根组件最好设定其宽度为100vw
 -->
 width: 100vw;
 position: absolute;
}
.slide-right-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
</style>

待解决问题

  • 子路由问题

子路由还没有考虑到

  • 缓存组件问题

使用上述方式, 缓存组件需要注意组件的name选项要和路由的name选项一致, 容易疏忽填写组件的name选项问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 #Javascript
vue transition 在子组件中失效的解决
Nov 12 #Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 #Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 #Javascript
Vue退出登录时清空缓存的实现
Nov 12 #Javascript
解决vue admin element noCache设置无效的问题
Nov 12 #Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 #Javascript
You might like
php 引用(&amp;)详解
2009/11/20 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
Python之读取TXT文件的方法小结
2018/04/27 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
森林病虫害防治方案
2014/06/02 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
会计专业自荐信范文
2015/03/05 职场文书
学校教师培训工作总结
2015/10/14 职场文书