V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Jeremial
V2EX  ›  JavaScript

Angular 全局页面切换动画 me-pageloading

  •  1
     
  •   Jeremial · 2014-07-12 19:32:12 +08:00 · 8907 次点击
    这是一个创建于 3776 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情http://tympanus.net/codrops/2014/04/23/page-loading-effects/. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做成一个angular module, 方便以后添加类似效果时, 直接使用.

    Github: https://github.com/jeremial/me-pageloading

    做好的demo效果

    1. 配合 angular-ui-router使用, 效果http://isay.me/me-pageloading/angular-ui-router.html
    2. 配合 angular-route使用, 效果http://isay.me/me-pageloading/angular-route.html

    目前整个模块可以零配置工作, 但是由于angular-route的实现机制, `$routeChangeSuccess`在页面初始化后会触发两次, 因此会造成页面直接进入后就会触发一次效果. 这个问题可以通过禁用`me-pageloading`的自动加载解决.

    在angular-ui-router中没有此问题.
    16 条回复    2014-07-15 14:41:39 +08:00
    airycanon
        1
    airycanon  
       2014-07-12 21:28:53 +08:00
    正在学习angular,赞一个。
    ivenvd
        2
    ivenvd  
       2014-07-12 21:50:01 +08:00
    看起来好棒!
    kmvan
        3
    kmvan  
       2014-07-12 22:01:15 +08:00 via Android
    动画效果都是毫无意义的,我觉得。
    scarlex
        4
    scarlex  
       2014-07-12 22:43:01 +08:00
    @kmvan
    我倒是觉得动画效果交互中的关键。动画效果对于提升用户体验有很大的帮助。Google 最近的 Material Design 也在动画上面下了很大功夫。
    whuhacker
        5
    whuhacker  
       2014-07-12 22:53:36 +08:00
    Github 已 star,感谢已发送
    Phariel
        6
    Phariel  
       2014-07-12 22:57:24 +08:00
    已star
    mulog
        7
    mulog  
       2014-07-12 23:18:04 +08:00
    Cool~
    Jeremial
        8
    Jeremial  
    OP
       2014-07-12 23:26:18 +08:00
    @whuhacker
    @Phariel
    @ivenvd
    @mulog
    看了之后很有感觉, 所以就直接移植了
    Jeremial
        9
    Jeremial  
    OP
       2014-07-12 23:37:35 +08:00
    @kmvan 如果是为了用动画而用动画, 当然是没有意义的, 但是如果应该用的地方, 用对了动画, 对用户体验的提升就不是一点半点的了
    kmvan
        10
    kmvan  
       2014-07-13 01:43:33 +08:00 via Android
    @Jeremial
    @scarlex
    我看不出 windows 的过渡动画有什么意义,什么淡入淡出,进出都耗上500ms 直接慢了一秒,大大们不觉得吗?
    scarlex
        11
    scarlex  
       2014-07-13 09:42:13 +08:00
    @kmvan
    我想了一会都没想到... windows 哪些地方会有动画?

    如果放到 app/web app 上面去考虑,动画可以起到缓冲和引导用户的作用。
    你可以想想如果没有动画的话,当你向左/向右滑动的时候,侧边栏就是突然占据了画面的一部分位置,这会让人感到不适和困惑。

    你可以再想想,如果在 Android/iOS/WP 中把全部动画效果都移除的话,用户使用起来会怎样?(对于你来说可能没什么变化)

    如 @Jeremial 所说,动画用在对的地方的话,可以很好的提升用户体验。

    现在的大部分产品都会去考虑用户体验的问题。如果你和你的竞争对手做的产品功能都是一样的,但是你的产品并没有考虑到用户体验,但竞争对手的产品却在用户体验升花了很多功夫,用户会更加倾向哪种产品?
    kmvan
        12
    kmvan  
       2014-07-13 10:44:04 +08:00
    @scarlex 手指滑动的动画这个需要。我只是认为,例如win的菜单显示,最大化最小化窗口,那些动画显然是多余的,瞬间显示所需内容比逐渐显示好,我认为这能提高我工作的效率,你不这样认为吗?
    scarlex
        13
    scarlex  
       2014-07-13 11:40:24 +08:00
    @kmvan
    刚才开虚拟机试了一下,嗯,windows下那样的粗糙的动画还不如直接去掉。看起来好不爽,好生硬的过度。这个可以当成一个动画用的不对的栗子吧
    spoonwep
        14
    spoonwep  
       2014-07-14 04:03:04 +08:00
    好赞!CSS也有好玩的切换动画 ^^
    tamamaxox
        15
    tamamaxox  
       2014-07-15 10:39:13 +08:00
    我要emberjs版。。。
    Jeremial
        16
    Jeremial  
    OP
       2014-07-15 14:41:39 +08:00
    @tamamaxox -_-! emberjs没看过啊... 只会angular
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5458 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 07:12 · PVG 15:12 · LAX 23:12 · JFK 02:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.