Vue仿微信app页面跳转动画效果

10:14:11独立开发者在开发移动产品时，为了更高效，通常会使用Web技术开发移动项目，既可以同时适应安卓、iOS和H5，也可以适应微信小程序稍加改动。

使用Vue.js开发移动页面时，默认组件过渡效果过于生硬，完全没有动画效果。于是我用Vue提供的组件过渡功能，写了一个模仿微信app页面跳转的动画，提升用户体验。

废话不多说，直接上图

骁龙的632安卓测试机，600元就有流畅的效果。

代码量很小，已经上传到https://github.com/YellowDoing/vue-route-transition GitHub

核心代码

transition :name='this。$ store . route action ' router-view//transition CSS。按下输入激活。按下-离开-激活。弹出输入激活。pop-leave-active { transit : all 0.4s；}.push-leave-to { transform : translate(-20%，0)；}.按回车键{transform: translate(100%，0)；}.按下输入激活{ z-index : 10；}.推-留-激活{ 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页面跳转的动画效果的介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！