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的更多相关文章

  1. ng animate

    要在angular中加入动画必须引入angular.animate.js插件,然后就可以在module中引入ngAnimate模块.如: var module1 = angular.module('m ...

  2. 基于angular+bower+glup的webapp

    一:bower介绍 1:全局安装安装bower cnpm i -g bower bower常用指令: bower init //初始化文件 bower install bower uninstall ...

  3. 初试angularjs动画(animate)

    angularjs不同版本的代码写法各有千秋,动画模块的写法也各有不同,以下是收集到的两大版本的写法,各位请: angularjs1.1.5版本(1.2之前) index.html代码: <!D ...

  4. 基于AngularJS/Ionic框架开发的性能优化

    AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...

  5. angular 2 animate 笔记

    好久没有在这里写点笔记了.时隔已久,angular1 去 angular2 咯 笔记来源:https://angular.cn/docs/ts/latest/guide/animations.html ...

  6. Phonegap集成angular/bootstrap/animate.css教程

    1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...

  7. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  8. Angular移除不必要的$watch之性能优化

    双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...

  9. Angular定义服务-Learn By Doing

    1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...

随机推荐

  1. 初识JavaScript,Ajax,jQuery,并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  2. 最新Internet Download Manager (IDMan) 6.25 Build 20 32位 64位注册破解补丁

    0x00 IDMan介绍 Internet Download Manager提升你的下载速度最多达5倍,安排下载时程,或续传一半的软件.Internet Download Manager的续传功能可以 ...

  3. 试用 Nexus OSS 3.0 的docker仓库 (二)

    试用 Nexus OSS 3.0 的docker仓库 (一) : http://www.cnblogs.com/wzy5223/p/5410990.html 三. 创建docker私有仓库,docke ...

  4. java 某字符串在另一字符串中是否存在

    boolean a = 字符串a.contains("字符串b");

  5. Third glance in Go

    在Go語言裏關於數組(Array),切片(Slice)和映射表(Map)的使用是非常常見的.有過其他語言編程背景的人會比較熟悉一下,但是也是因爲過於的熟悉,從而導致一個慣性思維,往往就會踢到“石頭”, ...

  6. ORA-12154 & TNS-03505 案例分享

    下面介绍一个工作中遇到的案例场景,应用服务器连接数据库出现"ORA-12154: TNS: 无法解析指定的连接标识符".一般情况下ORA-12541错误是很容易排除的,但是这次遇到 ...

  7. 编写Java应用程序。首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”、“取款”和“余额查询”。其次, 编写一个主类,在主类中测试Account类的功能

    package com.hanqi.test; //银行账号 public class account { private String zhanghao;//账号 //私有余额 private do ...

  8. SQLServer修改字段类型

    Alter table [表名] Alter column [列名] [列类型]

  9. yum简单安装apache

    yum install httpd -y chkconfig    httpd  on service httpd start  启动软件

  10. java汉化

    http://download.eclipse.org/technology/babel/babel_language_packs/R0.13.0/luna/luna.php _x86_64版本下载地 ...