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. 在IDEA 上使用Git查看主干和分支等

    使用IDEA 查看提交历史时,IDEA默认显示的页面是你当前页面的提交历史: 然后,你点击左侧的 log 键,则可以显示整个团队每个人的提交记录: 在选中每一次的记录以后,会弹出每次提交的所有文件(对 ...

  2. Vmware快速安装linux虚拟机(SUSE)

    安装环境:Vmware 11.SUSE11 64位 vmware快速安装linux虚拟机的过程还是比较简单的,步骤如下: 1.点击文件,新建虚拟机. 2.选择典型安装. 3.在红框中选择想要安装的虚拟 ...

  3. 从拟物化到扁平,再到Material Design

    Google I/O 2014提出Material Design,这段时间听到不少关于Material Design的解读,至此Google已经定位了自己的设计语言,我个人看来就是Android和iO ...

  4. Maven项目无法引入 Maven Dependencies Libraries 问题

    昨天在check下来maven项目之后一些配置好了,就是下载不是maven 依赖库,后面再网上找到如下解决方案. 在.classpath文件中加入如下代码就好了. <classpathentry ...

  5. H264解码学习-2015.04.16

    今天看了不少,却感觉收获寥寥. 1.H264相关知识 因为RTP协议发过来的数据已经经过了H264编码,所以这边需要解码.补充一下H264的相关知识. 与以往的视频压缩标准相比,H.264 视频压缩标 ...

  6. Java设计模式 - 适配器模式

    概念: 将一个类的接口,转换成客户期望的另一个接口.适配器模式让原来接口不兼容的类可以在一起工作. 解决的问题: 提供类似于中间人的作用:把原本不兼容.不能一起工作的接口组合在一起,使得它们能够在一起 ...

  7. 烂泥:学习Nagios(二):Nagios配置

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 nagios安装完毕后,我们现在就来配置nagios.有关nagios的安装,可以参考<烂泥:学习Nagios(一):Nagios安装>这篇文 ...

  8. hadoop如何处理长时间运行不完成的map/reduce 任务?

    如果某一个任务在某个节点上长时间不完成,怎么手动干预来处理这种情况?董西成博客上找到的回答:hadoop中有三种特殊的任务,failed task,killed task和speculative ta ...

  9. JavaScript实现简单的双向绑定

    很多的前端框架都支持数据双向绑定了,最近正好在看双向绑定的实现,就用Javascript写了几个简单的例子. 几个例子中尝试使用了下面的方式实现双向绑定: 发布/订阅模式 属性劫持 脏数据检测 发布/ ...

  10. 解决PowerShell命令行窗口中不显示光标的问题

    不知道什么原因,在有些系统上打开PowerShell命令行窗口后,光标无法显示.这种情况在Windows Server 2008/2012.Windows 8/9/10上都出现过,估计是由于某些系统软 ...