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. Android Build Error(1)

    Type 1 —— Build Path Problem : **.jar包文件缺失 1.在Android项目根目录下新建一个libs文件夹: 2.把你需要的导入的第三方Jar包复制进这个目录: 3. ...

  2. 关于激活Bentley软件详细步骤介绍(再补充一个)

    在安装完ContextCapture软件之后,大家怀着迫不及待的心情双击了运行快捷键.但是很遗憾的是,会产生下面的提示窗口: 也许大家并不在意,就觉得关掉这个窗口不就行了.然而,头疼的问题来了.这个窗 ...

  3. 【转】简析 .NET Core 构成体系

    前文介绍了.NET Core 在整个.NET 平台所处的地位,以及与.NET Framework的关系(原文链接),本文将详细介绍.NET Core 框架的构成和各模块主要功能,以及如何实现跨平台. ...

  4. HTML和CSS高级指南——定位详解

    本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...

  5. MongoDB使用汇总贴

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉.应用mongodb(NoSQL)开发,首先要打破原先的关系思维.范式思维. 本文作为使用mongodb一路 ...

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

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

  7. Java并发之死锁实例

    package com.thread.test.thread; /** * Created by windwant on 2016/6/3. */ public class MyTestDeadLoc ...

  8. Consul 启动命令

    服务端: nohup consul agent -server -bootstrap-expect 1 -config-dir /etc/consul.d/ -data-dir /var/opt/co ...

  9. 0003 64位Oracle11gR2不能运行SQL Developer的解决方法

    "应用程序开发"下的"SQL Developer"双击不可用,出现“Windows正在查找SQLDEVELOPER.BAT"的提示,如下图: 搜索博客 ...

  10. ThreadPoolExecutor-线程池开发的使用

    好久没有写过笔记了,最近做的一个项目涉及打线程池和队列的开发,觉得在这个项目中学习到的还是挺多的,对线程安全,并发的知识有加深认知:当然,现在用过的东西并不是代表以后还能娴熟的使用,做好笔记非常重要: ...