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 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
vue实现列表滚动的过渡动画
Jun 29 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 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php表单处理操作
2017/11/16 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
如何使用angularJs
2017/05/08 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python join方法使用详解
2019/07/30 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
平面设计师工作职责范文
2013/12/03 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
大学生毕业评语
2014/12/31 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
python基础详解之if循环语句
2021/04/24 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers