独立开发者在开发移动端产品时, 为了更高效, 通常会使用 web 技术来开发移动端项目, 可以同时适配 Android,iOS,H5, 稍加改动还可适配微信小程序.
在使用 vue.js 开发移动端页面的时候, 默认的组件转场效果过于生硬, 根本就没有动画效果. 于是我用 vue 提供的组件过渡功能, 写了个仿微信 App 页面跳转的动画, 以提高用户体验.
废话不多说, 直接上图
image
在 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
来源: http://www.jianshu.com/p/b19f31e2a5ba