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

[ik0r]

最近看了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中没有此问题.

[airycanon]

正在学习angular，赞一个。

[ivenvd]

看起来好棒！

[kmvan]

动画效果都是毫无意义的，我觉得。

[scarlex]

@kmvan
我倒是觉得动画效果交互中的关键。动画效果对于提升用户体验有很大的帮助。Google 最近的 Material Design 也在动画上面下了很大功夫。

[whuhacker]

Github 已 star，感谢已发送

[Phariel]

已star

[mulog]

Cool~

[ik0r]

@whuhacker
@Phariel
@ivenvd
@mulog
看了之后很有感觉, 所以就直接移植了

[ik0r]

@kmvan 如果是为了用动画而用动画, 当然是没有意义的, 但是如果应该用的地方, 用对了动画, 对用户体验的提升就不是一点半点的了

[kmvan]

@Jeremial
@scarlex
我看不出 windows 的过渡动画有什么意义，什么淡入淡出，进出都耗上500ms 直接慢了一秒，大大们不觉得吗？

[scarlex]

@kmvan
我想了一会都没想到... windows 哪些地方会有动画？

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

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

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

现在的大部分产品都会去考虑用户体验的问题。如果你和你的竞争对手做的产品功能都是一样的，但是你的产品并没有考虑到用户体验，但竞争对手的产品却在用户体验升花了很多功夫，用户会更加倾向哪种产品？

[kmvan]

@scarlex 手指滑动的动画这个需要。我只是认为，例如win的菜单显示，最大化最小化窗口，那些动画显然是多余的，瞬间显示所需内容比逐渐显示好，我认为这能提高我工作的效率，你不这样认为吗？

[scarlex]

@kmvan
刚才开虚拟机试了一下，嗯，windows下那样的粗糙的动画还不如直接去掉。看起来好不爽，好生硬的过度。这个可以当成一个动画用的不对的栗子吧

[spoonwep]

好赞！CSS也有好玩的切换动画 ^^

[tamamaxox]

我要emberjs版。。。

[ik0r]

@tamamaxox -_-! emberjs没看过啊... 只会angular