Angular 全局页面切换动画 me-pageloading
发布于 10 年前 作者 Treri 30091 次浏览 最后一次编辑是 8 年前

最近看了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 回复

喔，漂亮！

好东西, 果断支持哈

没看到什么效果啊。。。

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

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

碉堡了

回到顶部