Vue.js实现微信过渡动画左右切换效果


Posted in Javascript onJune 13, 2017

前言

在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用。

需要用到的技术栈:Vue+Vuex

先看看效果图

Vue.js实现微信过渡动画左右切换效果
过渡动画

示例代码

//app.vue
<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
 <keep-alive>
 <router-view class="router-view" ></router-view>
 </keep-alive>
</transition>
<script>
 import { mapState } from 'vuex'
 import sideFooter from "./components/Footer.vue"

 export default {
 name: 'app',
 data () {
 return {
 showFooter : false
 }
 },
 components : {
 sideFooter
 },
 computed:{
 ...mapState({
 direction: state => state.mutations.direction
 })
 },
 }
</script>

<style scoped>
 .vux-pop-out-enter-active,
 .vux-pop-out-leave-active,
 .vux-pop-in-enter-active,
 .vux-pop-in-leave-active {
 will-change: transform;
 transition: all 250ms;
 height: 100%;
 top: 0;
 position: absolute;
 backface-visibility: hidden;
 perspective: 1000;
 }

 .vux-pop-out-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
 }

 .vux-pop-out-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
 }

 .vux-pop-in-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
 }
</style>
// main.js
const history = window.sessionStorage;
history.clear()
let historyCount = history.getItem('count') * 1 || 0;
history.setItem('/', 0);

router.beforeEach(function (to, from, next) {

 const toIndex = history.getItem(to.path);
 const fromIndex = history.getItem(from.path);

 if (toIndex) {
 if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
 store.commit('UPDATE_DIRECTION', {direction: 'forward'})
 } else {
 store.commit('UPDATE_DIRECTION', {direction: 'reverse'})
 }
 } else {
 ++historyCount;
 history.setItem('count', historyCount);
 to.path !== '/' && history.setItem(to.path, historyCount);
 store.commit('UPDATE_DIRECTION', {direction: 'forward'})
 }
 next()
});

这里还用到了vuex,但是我stroe写了很多就不提出来了,主要就是通过 UPDATE_DIRECTION方法更新每一次的路由方向是前进还是后退。

man.js里面主要思想就是给路由增加一个索引存到sessionStorage里面,以点击过的索引值不变,新增加的路由,索引增加1,同时count+1,这样在页面切换时通过比较索引值的大小,大的向右小的向左,做到左右有规律的过渡。

好了至此一个左右切换的过渡效果就成了,最近由于一直在开发也没怎么更新文章,如果有朋友有好的想法欢迎与我交流。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
js函数般调用正则
Apr 08 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 #Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 #Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 #Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 #Javascript
深究AngularJS中$sce的使用
Jun 12 #Javascript
JS身份证信息验证正则表达式
Jun 12 #Javascript
用原生JS实现简单的多选框功能
Jun 12 #Javascript
You might like
PHP新手上路(七)
2006/10/09 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php简单生成随机数的方法
2015/07/30 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
书法比赛获奖感言
2014/02/10 职场文书
《大海那边》教学反思
2014/04/09 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书