基于Vue实现页面切换左右滑动效果
时间:2019-03-31
本文章向大家介绍基于Vue实现页面切换左右滑动效果,主要包括基于Vue实现页面切换左右滑动效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
基于Vue的页面切换左右滑动效果,具体内容如下
HTML文本页面:
<template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-view> </transition> </div> </template>
JS定义代码:定义在全局js文件里面
router.beforeEach((to, from, next) => { const list = ['home', 'group', 'user'] // 将需要切换效果的路由名称组成一个数组 const toName = to.name // 即将进入的路由名字 const fromName = from.name // 即将离开的路由名字 const toIndex = list.indexOf(toName) // 进入下标 const fromIndex = list.indexOf(fromName) // 离开下标 let direction = '' if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在 if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标,那么是左滑 direction = 'left' } else { direction = 'right' // 如果进入的下标大于离开的下标,那么是右滑 } } store.state.viewDirection = direction //这里使用vuex进行赋值 return next() })
在App.vue文件中,进行计算属性:
computed: { direction () { const viewDir = this.$store.state.viewDirection let tranName = '' if (viewDir === 'left') { tranName = 'view-out' } else if (viewDir === 'right') { tranName = 'view-in' } else { tranName = 'fade' } return tranName }, },
css3进行动画效果定义:使用sass
待定义引入样式文件:
// Variables $AnimateHook: "animated"; $AnimateDuration: 0.8s; // Mixins // Base Style .#{$AnimateHook} { -webkit-animation-duration: $AnimateDuration; animation-duration: $AnimateDuration; -webkit-animation-fill-mode: both; animation-fill-mode: both; // Modifier for infinite repetition &.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } } // Slide @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes inRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes inRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @-webkit-keyframes outLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes outLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } }
定义进入与离开的动画过渡:
.fade-enter-active, .fade-leave-active { transition: all .2s ease; } .fade-enter, .fade-leave-active { opacity: 0; } .view-in-enter-active, .view-out-leave-active { position: absolute; top: 0; width: 100%; padding-top: px2rem($titbarHeight); -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .view-in-enter-active { -webkit-animation-name: inRight; animation-name: inRight; } .view-out-leave-active { -webkit-animation-name: outLeft; animation-name: outLeft; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- C#事件(event)的一个实例
- linux学习第十篇:find命令,文件名后缀
- linux学习第十一篇:linux和Windows互传文件,用户配置文件和密码配置文件,用户组管理以及用户管理
- linux学习第十二篇:usermod命令,用户密码管理,mkpasswd命令
- 一斤代码深入理解系列(三):微信小程序和服务器通信
- C#CreateGraphics方法的三种实现方式
- 一斤代码深入理解系列(四):微信小程序和服务器通信-WebSocket
- linux学习第十四篇:查看磁盘,文件大小命令:df,du;磁盘分区
- 二叉树的性质和常用操作代码集合
- linux学习第十五篇:磁盘格式化,磁盘挂载,手动增加swap空间
- 《Java程序设计基础》 第8章手记Part 2
- 备忘录模式
- 《Java程序设计基础》 第8章手记Part 1
- 你很有想法,跟我学做菜吧No.3
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何在keras中添加自己的优化器(如adam等)
- python实现将中文日期转换为数字日期
- PHP中使用CURL发送get/post请求上传图片批处理功能
- django filter过滤器实现显示某个类型指定字段不同值方式
- PHP中使用mpdf 导出PDF文件的实现方法
- PyTorch实现重写/改写Dataset并载入Dataloader
- 详细分析Python垃圾回收机制
- PHP实现用session来实现记录用户登陆信息
- django序列化时使用外键的真实值操作
- 网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
- 如何基于Python爬取隐秘的角落评论
- PHP微信网页授权的配置文件操作分析
- php微信公众号开发之关键词回复
- Python 抓取数据存储到Redis中的操作
- PHP常见字符串操作函数与用法总结