Vue仿微信app页面跳转动画效果
更新时间：2019年08月21日 10:33:37 作者：IT独立开发者
这篇文章主要介绍了Vue仿微信app页面跳转动画效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
10:14:11独立开发者在开发移动端产品时，为了更高效，通常会使用Web技术来开发移动端项目，可以同时适配Android、iOS、H5，稍加改动还可适配微信小程序。
在使用Vue.js开发移动端页面的时候，默认的组件转场效果过于生硬，根本就没有动画效果。于是我用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页面跳转动画效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
element-ui动态级联选择器回显问题详解(二十多行代码搞定）
大家在使用element-ui的时候肯定会遇到这样一个问题,就是在你使用级联选择器的回显问题,下面这篇文章主要给大家介绍了关于element-ui动态级联选择器回显问题的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要给大家介绍如何在vue项目中设置首页,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要给大家介绍了关于vue获取当前路由的五种方式,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决
这篇文章主要介绍了Nuxt3嵌套路由,报错Failed to resolve component: NuxtChild的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了关于Vue CLI3中启动cli服务参数说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
uni-app中App与webview双向实时通信详细代码示例
在移动应用开发中,uni-app是一个非常流行的框架,它允许开发者使用一套代码库构建多端应用,包括H5、小程序、App等,这篇文章主要给大家介绍了关于uni-app中App与webview双向实时通信的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue中使用mixins/extends传入参数的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了在vue-cli3中使用axios获取本地json操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)
vue是目前最流行的前端框架,下面这篇文章主要给大家介绍了关于纯前端使用Vue3上传文件到minio文件服务器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要为大家详细介绍了Vue+ElementUI table实现表格分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
最新评论