angular animate
angular animate 有3种:1,css transition. 2,css keyframe. 3,javascript 用jquery的animate方法;
1,2 两种是纯粹css的,3是JS方法,可以使用外部库,比如Jquery。假如要在IE8下使用的话,估计只能使用JS的方法;
ag的animate触发是靠ag的事件来触发绑定在需要动画元素上的cssClass。
纯CSS的动画的阶段有2个阶段:正向和反向(理解为:从隐藏到显示为正向,显示到隐藏为反向)。
举个栗子,
正向:
阶段1,opacity:0; ng-enter
阶段2:opacity:1; nt-enter-active
反向:
阶段1:opacity:1;ng-leave
阶段2:opacity:0;ng-leave-active;
以上就是一般的动画写法;
但是directive的动画写法都一点点不同。
比如ng-show、ng-hide事件:当绑定了ng-show和hide事件元素在进行显示和隐藏的时候读取cssClass属性,然后再css文件中找到写有
.cssClass.ng-hide的属性和.cssClass中的属性。动画的事件依据写在cssClass中的transition来决定。
angular animate的更多相关文章
- ng animate
要在angular中加入动画必须引入angular.animate.js插件,然后就可以在module中引入ngAnimate模块.如: var module1 = angular.module('m ...
- 基于angular+bower+glup的webapp
一:bower介绍 1:全局安装安装bower cnpm i -g bower bower常用指令: bower init //初始化文件 bower install bower uninstall ...
- 初试angularjs动画(animate)
angularjs不同版本的代码写法各有千秋,动画模块的写法也各有不同,以下是收集到的两大版本的写法,各位请: angularjs1.1.5版本(1.2之前) index.html代码: <!D ...
- 基于AngularJS/Ionic框架开发的性能优化
AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...
- angular 2 animate 笔记
好久没有在这里写点笔记了.时隔已久,angular1 去 angular2 咯 笔记来源:https://angular.cn/docs/ts/latest/guide/animations.html ...
- Phonegap集成angular/bootstrap/animate.css教程
1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
- Angular移除不必要的$watch之性能优化
双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...
- Angular定义服务-Learn By Doing
1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...
随机推荐
- 初识JavaScript,Ajax,jQuery,并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- 最新Internet Download Manager (IDMan) 6.25 Build 20 32位 64位注册破解补丁
0x00 IDMan介绍 Internet Download Manager提升你的下载速度最多达5倍,安排下载时程,或续传一半的软件.Internet Download Manager的续传功能可以 ...
- 试用 Nexus OSS 3.0 的docker仓库 (二)
试用 Nexus OSS 3.0 的docker仓库 (一) : http://www.cnblogs.com/wzy5223/p/5410990.html 三. 创建docker私有仓库,docke ...
- java 某字符串在另一字符串中是否存在
boolean a = 字符串a.contains("字符串b");
- Third glance in Go
在Go語言裏關於數組(Array),切片(Slice)和映射表(Map)的使用是非常常見的.有過其他語言編程背景的人會比較熟悉一下,但是也是因爲過於的熟悉,從而導致一個慣性思維,往往就會踢到“石頭”, ...
- ORA-12154 & TNS-03505 案例分享
下面介绍一个工作中遇到的案例场景,应用服务器连接数据库出现"ORA-12154: TNS: 无法解析指定的连接标识符".一般情况下ORA-12541错误是很容易排除的,但是这次遇到 ...
- 编写Java应用程序。首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”、“取款”和“余额查询”。其次, 编写一个主类,在主类中测试Account类的功能
package com.hanqi.test; //银行账号 public class account { private String zhanghao;//账号 //私有余额 private do ...
- SQLServer修改字段类型
Alter table [表名] Alter column [列名] [列类型]
- yum简单安装apache
yum install httpd -y chkconfig httpd on service httpd start 启动软件
- java汉化
http://download.eclipse.org/technology/babel/babel_language_packs/R0.13.0/luna/luna.php _x86_64版本下载地 ...