Angular 全局页面切换动画 me-pageloading
最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做成一个angular module, 方便以后添加类似效果时, 直接使用.
Github: https://github.com/jeremial/me-pageloading
做好的demo效果
- 配合 angular-ui-router使用, 效果http://isay.me/me-pageloading/angular-ui-router.html
- 配合 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的更多相关文章
- (原)android中的动画(三)之动画监听&页面切换动画
1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...
- iOS页面切换动画实现方式。
iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...
- QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...
- Windows Phone使用sliverlight toolkit实现页面切换动画效果
使用应用时,好多app在页面切换的时候都有一个动画效果,感觉很炫,也大大增加了用户体验,怎么实现呢? 界面的切换,可以用Windows Phone Toolkit中的TransitionService ...
- react实现页面切换动画效果
一.前情概要 注:(我使用的路由是react-router4) 如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升: but the 问题是 ...
- Android5.0之后的页面切换动画
Android5.0之后给我们开发者剩了好多的事情,为什么这么说呢?还记得刚开始的时候,Android里面的所有的动画都要我们开发者自己来写,现在不需要了,因为5.0之后自带了好多的动画,比如:按钮点 ...
- Activity 切换动画和页面切换动画
public class MainActivity extends Activity { private ViewFlipper viewFlipper; private float startX; ...
- PPT页面切换动画
想要自己的PPT更加炫酷一些的话,可以再给每个页面的切换,加上动画效果. 第一步,按住ctrl键,鼠标点击选择想要增加切换动画的页面,然后点击菜单栏的“切换” 第二步,在切换菜单下面选择具体的切换效果 ...
- PresentViewController切换界面(一些系统自带的页面切换动画)
视图切换,没有NavigationController的情况下,一般会使用presentViewController来切换视图并携带切换时的动画, 其中切换方法如下: – presentViewCon ...
随机推荐
- CABasicAnimation精讲
前言 本教程写了这个效果图的demo,同时总结CABasicAnimation的使用方法. 看完gif动画完,看到了什么?平移.旋转.缩放.闪烁.路径动画. 实现平移动画 实现平移动画,我们可以通过t ...
- Altium Desiger自定义BOM导出格式
用Excel做一个xx.xlt的2003的模版文件,如名为:AltiumDesiger PCB BOM Template.xlt 将AltiumDesiger PCB BOM Template.xlt ...
- 如何关闭dell inspiron n4010的内置麦克
如何关闭dell inspiron n4010的内置麦克 dell inspiron n4010这款电脑的内置麦克是默认开启的,如果你的扩音器音量开得稍大,当你打字的时候就会听到回音,最讨厌的是,当你 ...
- Table 样式设置
http://www.gzsums.edu.cn/webclass/html/table.html
- Linux下升级python版本
转载自:http://lovebeyond.iteye.com/blog/1770476 CentOS下的Python版本一般都比较低,很多应用都需要升级python来完成.我装的centOS的默认的 ...
- IE自动化
自动打开www.baidu.com,并搜索关键字“abcd” #定义函数:等待页面打开 function WaitForLoad($ie) { sleep 2 do {Sleep -Mi 200} w ...
- ios 7.1 7.1.1 半完美越狱后 电脑訪问手机越狱文件夹的方法
7.1和7.1.1因为越狱不成熟,半完美越狱后电脑上无法訪问系统越狱文件夹,如var usr 等等. 今天有些意外地发现,能够在电脑上使用手机的越狱文件夹我手机 i4 7.1.1 联通 半完美越狱,没 ...
- 谷歌插件开发(实现CSDN快速登陆)
谷歌浏览器插件带来了很大的方便,于是就想着是不是也可以开发一个来用用.几经折腾下,开发了个CSDN快速 登陆的插件.下面简述一下开发的步骤. 1.开发工具:谷歌浏览器(我开发时用的是chrome 30 ...
- Github上最全的APICloud开源前端框架效果盘点(转)
1.微信网站几分钟变身“原生 App” 微信推出了微信JS-SDK,使微信公共号可以直接调用微信原生的接口,具备部分原生应用的能力.微信JS-SDK的推出,将大大提高微信公共号的 用户体验,但是如果存 ...
- linux对外开放某个端口命令
/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT /etc/rc.d/init.d/iptables save /etc/rc.d/init.d/ ...