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脚本
Dec 12 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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中使用X-SendFile头让文件下载更快
2014/06/01 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python画双y轴图像的示例代码
2019/07/07 Python
python数字类型math库原理解析
2020/03/02 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
指针和引用有什么区别
2013/01/13 面试题
学校课外活动总结
2014/05/08 职场文书
会员卡清退活动总结
2014/08/27 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
医院员工辞职信范文
2015/05/12 职场文书
惊天动地观后感
2015/06/10 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL