最近看了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. LINUX下成功搭建SVN

    步骤如下: 1: yum install -y subversion 2:svnserve –version 3: [root@singledb ~]# mkdir /u02/svn [root@si ...

  2. POJ1228(稳定凸包问题)

    题目:Grandpa's Estate   题意:输入一个凸包上的点(没有凸包内部的点,要么是凸包顶点,要么是凸包边上的点),判断这个凸包是否稳定.所谓稳 定就是判断能不能在原有凸包上加点,得到一个更 ...

  3. [转]MyEclipse for Spring2014破解

    转至:http://blog.my-eclipse.cn/myeclipse-2014-crack.html 一.安装完成MyEclipse2014(适用于2013等版本)后,不要打开软件,下载破解附 ...

  4. C++ Lambda表达式用法

    C++ 11中的Lambda表达式用于定义并创建匿名的函数对象,以简化编程工作. Lambda的语法形式如下: [函数对象参数] (操作符重载函数参数) mutable或exception声明 -&g ...

  5. 令人惊奇的gdb和pstack

    pstack竟然是一个shell脚本,核心是调用gdb的thread apply all bt查看进程的所有线程的堆栈,之后用sed正则展示线程堆栈信息. /proc/pid/exe是一个指向可执行文 ...

  6. jQuery UI vs EasyUI

    几个UI框架的比较k: 目前工作中可能会常用到几个UI框架,如 Ext: http://docs.sencha.com/ext-js/4-1/#!/example 感觉其过于复杂,性能不高,所以一直没 ...

  7. Cocos2d-x——CocosBuilder官方帮助文档翻译3 动画

    Working with Animations 动画 You can use CocosBuilder for creating character animations, animating com ...

  8. jQuery提交Json数据到Webservice，并接收返回的Json数据

    jQuery ajax webservice:get 和 post 一.GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; ...

  9. 继承虚函数浅谈 c++ 类，继承类，有虚函数的类，虚拟继承的类的内存布局，使用vs2010打印布局结果。

    本文笔者在青岛逛街的时候突然想到的...最近就有想写几篇关于继承虚函数的笔记,所以回家到之后就奋笔疾书的写出来发布了 应用sizeof函数求类巨细这个问题在很多面试,口试题中很轻易考,而涉及到类的时候 ...

  10. 自己写一个jQuery垂直滚动栏插件（panel）

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...