南强小屋 Design By 杰米
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,微信,微信页面跳转动画
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无Vue仿微信app页面跳转动画效果的评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。