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. Nodejs的模块实现

    在Node中引入模块,需要经历如下3个步骤:(1)路径分析(2)文件定位(3)编译执行 Node中模块分为两类: 一是Node提供的模块——核心模块.这部分在Node源代码的编译过程中,编译进了二进制 ...

  2. javascript-外观模式

    外观模式笔记   1. 为一组复杂的子系统接口提供一个更高级的统一接口, 通过这个接口使得对子系统接口的访问更容易: 2. 简化底层接口的复杂性,解决浏览器兼容性问题. 3.也会用于对底层结构兼容性做 ...

  3. 十五天精通WCF——第十二天 说说wcf中的那几种序列化

    我们都知道wcf是由信道栈组成的,在我们传输的参数走到传输信道层之前,先需要经过序列化的过程,也就是将参数序列化为message,这篇 我们就来说说这里的序列化,蛮有意思的,可能初学者也明白,在wcf ...

  4. CSS之旅——第三站 强大的伪选择器

    说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼...首先 我们可以在VS里面提前预览一下. 可以看到,上面的伪类有很多很多, ...

  5. SQL Server 2008 R2——T-SQL 存储过程 返回表

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  6. Linux计时器

    Linux中, 系统为每个系统都维护了三种计时器,分别为: 真实计数器, 虚拟计时器以及实用计时器, 一般情况下都使用真实计时器 getitimer()/setitimer() //读取/设置内部计时 ...

  7. 学会使用简单的 MySQL 常用操作

    一.MySQL 数据库的基本安装 # yum 安装 mysql 版本:5.1.73 [root@mysql ~]# yum install -y mysql-server mysql # 启动 MyS ...

  8. iNeedle系统使用注意事项

    1.不能监控https协议的报文 目前只能监控http协议的网站,对于https协议(加密)的网站暂时不支持监控,甚至连流量都没有作统计,在测试iNeedle的时候也要多加注意.

  9. MarkDown插入图片

    MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...

  10. CoCreateInstance调用COM接口伪流程

    在编写组件程序时,经常会使用CoCreateInstance直接取COM组件的接口,非常方便,那CoCreateInstance到底干了些什么事呢?1.CoCreateInstance取COM组件的接 ...