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事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP $_FILES函数详解
2011/03/09 PHP
php array的学习笔记
2012/05/16 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
JS Array对象入门分析
2008/10/30 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python程序语言快速上手教程
2012/07/18 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
推广普通话主题班会
2015/08/17 职场文书