最近看了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. 使用paramiko进行打包操作

    使用paramiko执行ssh命令的时候有一个很坑爹的地方:它无法准确的识别你的系统环境变量,所以使用一些命令的时候会发现,直接在系统中执行该命令的时候可以,但是换成paramiko执行的时候会报错说 ...

  2. hibernate和mybatis

    本来是个菜鸟程序员,现在大学还没毕业. 最近一直在想一个问题,到底是hibernate好还是mybatis好.我总觉得 hibernate好用之极,在大学里做过的小项目都是用的hibernate,只要 ...

  3. FPGA高级设计——时序分析和收敛（转）

    何谓静态时序分析(Static Timing Analysis,简称STA)? 它可以简单的定义为:设计者提出一些特定的时序要求(或者说是添加特定的时序约束),套用特定的时序模型,针对特定的电路进行分 ...

  4. [PoC]某B2B网站的一个反射型XSS漏洞

    Author: Charlie 个人微博:http://YinYongYou.com 转载请注明出处. 工作过程纯粹手贱,测试了一下.然后发现了这么一个东西.有心利用能造成大范围影响.如可以自由修改用 ...

  5. nginx将http重定向到https

    1.rewrite server { listen 80; server_name test.com; rewrite ^(.*)$ https://$host$1 permanent; } 2. n ...

  6. c# socket通信较完善方案

    c#的socket通信应用.文件较多.附件为工程.  core   AbstractBytesWorker.cs    字节工作器(基类),用于用于同一不同功能的字节工作器  BinaryHand.c ...

  7. Ubuntu下多服务器 Rsync同步镜像服务配置

    主服务器:192.168.5.13_ubuntu 从服务器:192.168.5.11_centos ================== 1> 在两台主机上分别安装rsync========== ...

  8. C++之运算符重载(2)

    上一节主要讲解了C++里运算符重载函数,在看了单目运算符(++)重载的示例后,也许有些朋友会问这样的问题.++自增运算符在C或C++中既可以放在操作数之前,也可以放在操作数之后,但是前置和后置的作用又 ...

  9. npm获取配置,设置代理

    npm获取配置有6种方式,优先级由高到底. 命令行参数. --proxy http://server:port即将proxy的值设为http://server:port. 环境变量. 以npm_con ...

  10. IE7下position:relative的问题

    如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.