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. Java基础知识学习（九）

    GUI开发 先前用Java编写GUI程序,是使用抽象窗口工具包AWT(Abstract Window Toolkit).现在多用Swing.Swing可以看作是AWT的改良版,而不是代替AWT,是对A ...

  2. 开篇：IT软件人员学习的书籍 - IT软件人员书籍系列文章

    读书是一件快乐的事情. 读书能够增长知识,了解社会,了解人类的思想,继而转换成智慧.无论是什么人,都需要读书,多读书,读好书,同时也要把书中的精髓记录下来,一个是当做读后感,一个是为以后如果忘记了回头 ...

  3. laravel excel迁移到lumen

    1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel ,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和 导出  ...

  4. PMBOK学习笔记二－项目管理过程

    项目管理过程可归纳为五类,即五大项目管理过程组 启动过程组.定义一个新项目或现有项目的一个新阶段,授权开始该项目或阶段的一组过程..规划过程组.明确项目范围,优化目标,为实现目标制定行动方案的一组过程 ...

  5. 编写一个Java应用程序，该应用程序包括2个类：Print类和主类E。Print 类里有一个方法output()功能是输出100 ~ 999之间的所有水仙花数（各位数字的 立方和等于这个三位数本身，如: 371 = 33 + 73 + 13。）在主类E的main方法中来 测试类Print

    package zuoye; public class print { void output() { System.out.println("100-999之间的水仙花数是:") ...

  6. itext 实现pdf打印数字上标和下标

    https://kathleen1974.wordpress.com/category/itext-pdf/ In one of my project, we need to give the use ...

  7. Java api 入门教程 之 JAVA的SYSTEM类

    System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...

  8. 工作中常用的Linux命令：ipcs/ipcrm命令

    本文链接:http://www.cnblogs.com/MartinChentf/p/6057100.html (转载请注明出处) ipcs 1. 命令格式 ipcs [resource-option ...

  9. Linux rm 删除文件

    rm 删除文件rm -f 强制删除-i 提示-r 删除目录的时候-v 可实话 rm -rfv 多目录 不提示 [root@wang whp]# touch .txt [root@wang whp]# ...

  10. CentOS最大文件描述符限制更改

    系统级的限制:/proc/sys/fs/file-max中设定了系统最大能打开的文件数. 查看该值可以用如下方式: [root@#panda ~]# cat /proc/sys/fs/file-max ...