angular animate
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的更多相关文章
- ng animate
要在angular中加入动画必须引入angular.animate.js插件,然后就可以在module中引入ngAnimate模块.如: var module1 = angular.module('m ...
- 基于angular+bower+glup的webapp
一:bower介绍 1:全局安装安装bower cnpm i -g bower bower常用指令: bower init //初始化文件 bower install bower uninstall ...
- 初试angularjs动画(animate)
angularjs不同版本的代码写法各有千秋,动画模块的写法也各有不同,以下是收集到的两大版本的写法,各位请: angularjs1.1.5版本(1.2之前) index.html代码: <!D ...
- 基于AngularJS/Ionic框架开发的性能优化
AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...
- angular 2 animate 笔记
好久没有在这里写点笔记了.时隔已久,angular1 去 angular2 咯 笔记来源:https://angular.cn/docs/ts/latest/guide/animations.html ...
- Phonegap集成angular/bootstrap/animate.css教程
1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
- Angular移除不必要的$watch之性能优化
双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...
- Angular定义服务-Learn By Doing
1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...
随机推荐
- python 判断学期与学年
9,10,11,12,1 第一学期 2,3,4,5,6,7 第二学期 其中8月份放假,暂且放入第一学期.因为大部分学校都选在8月底开学 import datetime def getXNandXQ() ...
- zendstudio文件编码修改问题
转载:http://blog.csdn.net/kunlong0909/article/details/7818620 朋友,在zendstudio ide中,你是否碰到导入一个项目后,发现项目中文件 ...
- 安卓普通类通过classloader访问资源文件
Android studio不知道怎么设置,才可以在生成APK时把一些文件打包进去. 但是不管怎么样,放在res文件夹下的东西是一定得打包的.所以把一些资源文件放在res/raw这个文件夹里是科学的. ...
- 让vc2010的项目在vc2012也能直接使用,而不必修改PlatformToolSet
在Visual Studio 2010新建的项目到2012里打开会要求修改PlatformToolset的值,从v100改为v110.如果这个项目需要进版本管理(VCS,如git, svn),这将造成 ...
- 十五天精通WCF——第二天 告别烦恼的config配置
经常搞wcf的基友们肯定会知道,当你的应用程序有很多的“服务引用”的时候,是不是有一种疯狂的感觉...从一个环境迁移到另外一个环境,你需要改变的 endpoint会超级tmd的多,简直就是搞死了人.. ...
- 常用的主机监控Shell脚本
最近时不时有朋友问我关于服务器监控方面的问题,问常用的服务器监控除了用开源软件,比如:cacti,nagios监控外是否可以自己写shell脚本呢?根据自己的需求写出的shell脚本更能满足需求,更能 ...
- 一篇博客理解Recyclerview的使用
从Android 5.0开始,谷歌公司推出了RecylerView控件,当看到RecylerView这个新控件的时候,大部分人会首先发出一个疑问,recylerview是什么?为什么会有recyler ...
- shell脚本变量
既然是变量,自然分变量名和变量值,在使用的时候一定要注意哪些地方需要用变量名,哪些地方需要用变量的值. 自定义变量 shell变量不需要声明,随用随定义,给变量赋值的时候要注意 shell是空格敏感的 ...
- Android 解读.apk解压后文件详细说明
转自:http://xdang.org/post-602.html 以下原文: 反编译 — 在apk文件中能得到什么 最近在做android客户端与服务器安全通信,有一种常见的不安全因素:很多软件常常 ...
- 利用HTML实现软件的UI
先看看下面的实例 这是应朋友之邀编写的查询职业技能鉴定考核的分数的软件.看过我之前的博文的,可知这是借用我之前的网页界面. 这个UI,如果用WinForm的控件来实现,难度很高. 于是另辟蹊径,用We ...