Vue 仿微信 app 页面跳转动画

[huanggan]

独立开发者在开发移动端产品时，为了更高效，通常会使用 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

扫码关注微信公众号《 IT 独立开发者》,帮助程序员拓展产品、运营、设计等思维能力，开发独立产品，致力成为自由职业者，实现财富自由。

[1KN6sAqR0a57no6s]

你好歹也写成插件再来推广公众号，行不行

[likaka]

又在造轮子

[huanggan]

@YuxiangLuo v 站的程序员都那么牛批了吗

[MyouiSouth]

这已经不能称得上是轮子了。。。。

[huanggan]

@YuxiangLuo 看看 V 站首页，现在有几个写技术和代码的

[jeodeng]

...这个东西很早之前就有过 n 个解决方案了，你这冷饭炒的，直接推公众号不就行了吗。
我之前也写过一篇文，结合了 vue-navigation 的实现路由缓存，加上过渡动画并且还可以记录滚动位置。
https://github.com/jeodeng/my-notes/blob/master/articles/vue-navigations.md

[gaigechunfeng]

vue 原生没有支持页面的过渡动画吗？
它的动画都是同一页面内的组件的动画吗？
这个我还不是很了解。

[1KN6sAqR0a57no6s]

@huanggan V 站并不是一个专门讨论“技术和代码”的社区，但是潜意识里对“技术和代码”是有一定要求的，类似《教你五分钟搭建 wordpress 博客》和你的这篇《我今天看了 Vue 文档第三节》，没有几个人想看到（至少我不想看到）。再说你的公众号，我刚刚关注了，要教别人成为独立开发者实现财务自由——不出意外你连一个上架 APP 都没有，写过两个 DEMO 就要教别人财务自由，能不能现实点。

[huanggan]

@YuxiangLuo 刚开始做而已

[jeodeng]

@gaigechunfeng 他这个就是用的 vue 原生的，你可以理解为他写的这个东西就是写了一段代码解决了一个功能需求。只是会用和不会用的区别...就好比用原生 js 解决一个按钮绑定多个事件的方法。。。

[guolaopi]

不出意外的图炸了

[wunonglin]

要是能把下面推广公众号的文字删掉我一定给你这个文章点个 TOP

[coolooks]

这里的人都装逼的不要不要的，楼主无需理会

[finely]

已 Star，楼主加油

[cssTheGreatest]

有天我要发个帖教人怎么用手拿东西

[zhw2590582]

只能说非常普通，我觉得你可以做个更复杂更强大的东西出来，再来推广公众号更有效果，这么普通的东西怎么拿得出手呢。

[q8164305]

懒得喷

[hyy1995]

哈哈哈哈哈哈哈哈哈哈哈，充满好奇的点进来，然后懒得喷+1

[Melting]

说实话这东西就是新手教程。。一点都没吸引力，怎么让人点到你的公众号

[ccyu220]

真...新手教程。。。这有什么好传 Github 的。

[huanggan]

@ccyu220 对专业做 Vue 的是新手教程，对全栈开发者来说就有用

[huanggan]

@Melting 对专业做 Vue 的是新手教程，对全栈开发者来说就有用