CNode

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

TTreri发布于12 年前最后回复12 年前6 回复32484 浏览0 收藏

最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在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中没有此问题.

查看回复

回复 (6)

T
think2011#1·12 年前

喔,漂亮!

P
Pana#2·12 年前

好东西, 果断支持哈

K
kingapple#3·12 年前

没看到什么效果啊。。。

Z
zzjin#4·12 年前

我觉得动画本身就加载页面似乎更好些...动画完了还要出现相亲相爱的两个小球等待有点浪费呢....

T
Treri#5·12 年前
引用 zzjin我觉得动画本身就加载页面似乎更好些...动画完了还要出现相亲相爱的两个小球等待有点浪费呢....

如果页面切换是需要先到server取数据呢? 如果不加两个小球的话, 整个页面就像白了一样, 加两个小球是为了告诉用户, 当前正在加载东西.

R
ringtail#6·12 年前

碉堡了

参与回复
登录后即可参与回复。登录