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

原文地址：http://cnodejs.org/topic/53c1132a400ca4581b538e39

Angular 全局页面切换动画 me-pageloading的更多相关文章

  1. (原)android中的动画(三)之动画监听&页面切换动画

    1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...

  2. iOS页面切换动画实现方式。

    iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...

  3. QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

    一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...

  4. Windows Phone使用sliverlight toolkit实现页面切换动画效果

    使用应用时,好多app在页面切换的时候都有一个动画效果,感觉很炫,也大大增加了用户体验,怎么实现呢? 界面的切换,可以用Windows Phone Toolkit中的TransitionService ...

  5. react实现页面切换动画效果

    一.前情概要 注:(我使用的路由是react-router4)     如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升:     but the 问题是 ...

  6. Android5.0之后的页面切换动画

    Android5.0之后给我们开发者剩了好多的事情,为什么这么说呢?还记得刚开始的时候,Android里面的所有的动画都要我们开发者自己来写,现在不需要了,因为5.0之后自带了好多的动画,比如:按钮点 ...

  7. Activity 切换动画和页面切换动画

    public class MainActivity extends Activity { private ViewFlipper viewFlipper; private float startX; ...

  8. PPT页面切换动画

    想要自己的PPT更加炫酷一些的话,可以再给每个页面的切换,加上动画效果. 第一步,按住ctrl键,鼠标点击选择想要增加切换动画的页面,然后点击菜单栏的“切换” 第二步,在切换菜单下面选择具体的切换效果 ...

  9. PresentViewController切换界面（一些系统自带的页面切换动画）

    视图切换,没有NavigationController的情况下,一般会使用presentViewController来切换视图并携带切换时的动画, 其中切换方法如下: – presentViewCon ...

随机推荐

  1. POJ 3660 Cow Contest （Floyd）

    http://poj.org/problem?id=3660 题目大意:n头牛两两比赛经过m场比赛后能判断名次的有几头可转 化为路径问题,用Floyd将能够到达的路径标记为1,如果一个点能 够到达剩余 ...

  2. mongod的主要参数解释

    mongod的主要参数有:

  3. UVa 1630 Folding (区间DP)

    题意:折叠一个字符串,使得其成为一个尽量短的字符串  例如AAAAAA变成6(A) 而且这个折叠是可以嵌套的,例如 NEEEEERYESYESYESNEEEEERYESYESYES 会变成 2(N5( ...

  4. MFC实现数独（1）

    雨天纷纷扰扰,数月里每日有雨,这个夏天不热,写这个数独的动机很简单:实践是最好的成长方式,想要获得自信,必有这么一遭,我躲不过.至于决定记录成博客,则是因为很久没有写文章,经常感觉脑海里很空白,屡次开 ...

  5. scons用户指南翻译(附gcc/g++参数详解)

    scons用户指南 翻译 http://blog.csdn.net/andyelvis/article/category/948141 官网文档 http://www.scons.org/docume ...

  6. [前端JS学习笔记]JavaScript CallBack

    一.概念介绍 CallBack : "回调" . 在spring优秀框架回调无处不在, 回调的运用场景很多, 如 swt事件监听.netty等.它的主要作用是提高程序执行效率, 一 ...

  7. CentOS 7安装iptables服务，以及常用命令

    之前使用的是CentOS6.5,并且学艺不精,用啥查啥,用完就忘.并且网上大部分资料是基于CentOS7之前的版本. 在CentOS7中,默认的防火墙不是iptables,而是firewalld.而且 ...

  8. C#多线程开发

    1.进程与线程的区别 通俗的讲,进行就是任务管理器中进行列表中看到的正在运行的程序,它是一个动态的概念,活动的实体. 线程是程序执行流的最小单元,是线程中一个实体,是系统独立调度和分派CPU基本单位. ...

  9. Asp.net MVC @Html.DisplayNameFor中文乱码解决办法

    这是utf8的问题,vs2015默设要用utf8编码,以前的gb2312皆会产生乱码 这问题还是会继续发生,因为常会复制旧程序档进新方案.它会出现很奇怪的错误,而不是这么明显的乱码,你怎么抓bug都抓 ...

  10. Js Pattern - Namespace Pattern

    bad code // BEFORE: 5 globals // Warning: antipattern // constructors function Parent() {} function ...