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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3805 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

angular

router

页面

16 条回复 • 2014-07-15 14:41:39 +08:00

airycanon

2014-07-12 21:28:53 +08:00

正在学习angular，赞一个。

ivenvd

2014-07-12 21:50:01 +08:00

看起来好棒！

kmvan

2014-07-12 22:01:15 +08:00 via Android

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

scarlex

2014-07-12 22:43:01 +08:00

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

whuhacker

2014-07-12 22:53:36 +08:00

Github 已 star，感谢已发送

Phariel

2014-07-12 22:57:24 +08:00

已star

mulog

2014-07-12 23:18:04 +08:00

Cool~

Jeremial

2014-07-12 23:26:18 +08:00

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

Jeremial

2014-07-12 23:37:35 +08:00

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

kmvan

2014-07-13 01:43:33 +08:00 via Android

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

scarlex

2014-07-13 09:42:13 +08:00

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

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

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

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

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

kmvan

2014-07-13 10:44:04 +08:00

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

scarlex

2014-07-13 11:40:24 +08:00

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

spoonwep

2014-07-14 04:03:04 +08:00

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

tamamaxox

2014-07-15 10:39:13 +08:00

我要emberjs版。。。

Jeremial

2014-07-15 14:41:39 +08:00

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