Vue仿微信app页面跳转动画效果


Posted in Javascript onAugust 21, 2019

10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android、iOS、H5,稍加改动还可适配微信小程序。

在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬,根本就没有动画效果。于是我用Vue提供的组件过渡功能,写了个仿微信app页面跳转的动画,以提高用户体验。

废话不多说,直接上图

Vue仿微信app页面跳转动画效果

在600元骁龙632安卓测试机效果流畅。

代码量很少,已上传至GitHub https://github.com/YellowDoing/vue-route-transition

核心代码

<transition :name="this.$store.routeAction">
<router-view/>
</transition>

CSS

.push-enter-active,.push-leave-active
, .pop-enter-active,.pop-leave-active{
transition: all 0.4s;
}
.push-leave-to{
transform: translate(-20%,0);
}
.push-enter {
transform: translate(100%, 0);
}
.push-enter-active {
z-index: 10;
}
.push-leave-active {
z-index: 0;
}
.pop-leave-active {
transform: translate(100%, 0);
z-index: 11;
}
.pop-enter{
transform: translate(-20%,0);
}

Vue.js组件过渡相关文档 https://cn.vuejs.org/v2/guide/transitions.html

总结

以上所述是小编给大家介绍Vue仿微信app页面跳转动画效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
localStorage实现便签小程序
Nov 28 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 #Javascript
深入理解Vue keep-alive及实践总结
Aug 21 #Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 #Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 #Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 #Javascript
Vue formData实现图片上传
Aug 20 #Javascript
Angular8 Http拦截器简单使用教程
Aug 20 #Javascript
You might like
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
shiro授权的实现原理
2017/09/21 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python之import机制详解
2014/07/03 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
iPython pylab模式启动方式
2020/04/24 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
StringBuilder和String的区别
2015/05/18 面试题
北大青鸟学生求职信
2013/09/24 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
横店影视城导游词
2015/02/06 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
防震减灾主题班会
2015/08/14 职场文书
一行Python命令实现批量加水印
2022/04/07 Python