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页面跳转动画效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,这篇文章主要给大家介绍了关于Vue条件判断之循环举例详解的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了Vue实现图书管理小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了vue-cli使用rem,vue自适应，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了vue项目实现图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
vue3+elementui-plus实现无限递归菜单示例代码
这篇文章主要介绍了vue3+elementui-plus实现无限递归菜单,当一个组件的 key 值发生变化时,Vue 会认为这是一个新的组件实例,会强制重新创建和渲染这个组件,本文通过示例代码详细讲解,需要的朋友可以参考下2024-04-04
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js，这篇文章主要介绍了axios在Vue3中的使用,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了三种方法，可以实现将HTML页面转为PDF并实现下载。文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下2022-04-04
这篇文章主要介绍了vue跨域处理方式(vue项目中baseUrl设置问题)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景，本文主要介绍了vue 虚拟滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
最新评论