V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
huanggan
V2EX  ›  程序员

Vue 仿微信 app 页面跳转动画

  •  
  •   huanggan ·
    YellowDoing · 2019-08-21 10:01:46 +08:00 · 4495 次点击
    这是一个创建于 1202 天前的主题,其中的信息可能已经有所发展或是发生改变。

    独立开发者在开发移动端产品时,为了更高效,通常会使用 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 独立开发者》,帮助程序员拓展产品、运营、设计等思维能力,开发独立产品,致力成为自由职业者,实现财富自由。

    22 条回复    2019-08-21 16:04:57 +08:00
    YuxiangLuo
        1
    YuxiangLuo  
       2019-08-21 10:20:07 +08:00
    你好歹也写成插件再来推广公众号,行不行
    likaka
        2
    likaka  
       2019-08-21 10:30:46 +08:00
    又在造轮子
    huanggan
        3
    huanggan  
    OP
       2019-08-21 10:32:42 +08:00
    @YuxiangLuo v 站的程序员都那么牛批了吗
    MyouiSouth
        4
    MyouiSouth  
       2019-08-21 10:57:32 +08:00
    这已经不能称得上是轮子了。。。。
    huanggan
        5
    huanggan  
    OP
       2019-08-21 11:01:24 +08:00
    @YuxiangLuo 看看 V 站首页,现在有几个写技术和代码的
    jeodeng
        6
    jeodeng  
       2019-08-21 11:07:21 +08:00
    ...这个东西很早之前就有过 n 个解决方案了,你这冷饭炒的,直接推公众号不就行了吗。
    我之前也写过一篇文,结合了 vue-navigation 的实现路由缓存,加上过渡动画并且还可以记录滚动位置。
    https://github.com/jeodeng/my-notes/blob/master/articles/vue-navigations.md
    gaigechunfeng
        7
    gaigechunfeng  
       2019-08-21 11:13:01 +08:00
    vue 原生没有支持页面的过渡动画吗?
    它的动画都是同一页面内的组件的动画吗?
    这个我还不是很了解。
    YuxiangLuo
        8
    YuxiangLuo  
       2019-08-21 11:14:46 +08:00   ❤️ 3
    @huanggan V 站并不是一个专门讨论“技术和代码”的社区,但是潜意识里对“技术和代码”是有一定要求的,类似《教你五分钟搭建 wordpress 博客》和你的这篇《我今天看了 Vue 文档第三节》,没有几个人想看到(至少我不想看到)。再说你的公众号,我刚刚关注了,要教别人成为独立开发者实现财务自由——不出意外你连一个上架 APP 都没有,写过两个 DEMO 就要教别人财务自由,能不能现实点。
    huanggan
        9
    huanggan  
    OP
       2019-08-21 11:20:03 +08:00
    @YuxiangLuo 刚开始做而已
    jeodeng
        10
    jeodeng  
       2019-08-21 11:21:03 +08:00
    @gaigechunfeng 他这个就是用的 vue 原生的,你可以理解为他写的这个东西就是写了一段代码解决了一个功能需求。只是会用和不会用的区别...就好比用原生 js 解决一个按钮绑定多个事件的方法。。。
    guolaopi
        11
    guolaopi  
       2019-08-21 11:30:03 +08:00
    不出意外的图炸了
    wunonglin
        12
    wunonglin  
       2019-08-21 11:30:28 +08:00
    要是能把下面推广公众号的文字删掉我一定给你这个文章点个 TOP
    coolooks
        13
    coolooks  
       2019-08-21 11:34:00 +08:00
    这里的人都装逼的不要不要的,楼主无需理会
    finely
        14
    finely  
       2019-08-21 11:59:34 +08:00
    已 Star,楼主加油
    cssTheGreatest
        15
    cssTheGreatest  
       2019-08-21 12:56:04 +08:00
    有天我要发个帖教人怎么用手拿东西
    zhw2590582
        16
    zhw2590582  
       2019-08-21 12:59:19 +08:00
    只能说非常普通,我觉得你可以做个更复杂更强大的东西出来,再来推广公众号更有效果,这么普通的东西怎么拿得出手呢。
    q8164305
        17
    q8164305  
       2019-08-21 13:07:26 +08:00 via Android
    懒得喷
    hyy1995
        18
    hyy1995  
       2019-08-21 14:14:48 +08:00
    哈哈哈哈哈哈哈哈哈哈哈,充满好奇的点进来,然后懒得喷+1
    Melting
        19
    Melting  
       2019-08-21 14:32:06 +08:00
    说实话这东西就是新手教程。。一点都没吸引力,怎么让人点到你的公众号
    ccyu220
        20
    ccyu220  
       2019-08-21 16:01:42 +08:00
    真...新手教程。。。这有什么好传 Github 的。
    huanggan
        21
    huanggan  
    OP
       2019-08-21 16:04:39 +08:00
    @ccyu220 对专业做 Vue 的是新手教程,对全栈开发者来说就有用
    huanggan
        22
    huanggan  
    OP
       2019-08-21 16:04:57 +08:00
    @Melting 对专业做 Vue 的是新手教程,对全栈开发者来说就有用
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3684 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 48ms · UTC 04:52 · PVG 12:52 · LAX 20:52 · JFK 23:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.