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 ...
随机推荐
- 关于Storyboard的使用
前言:说起来码龄很久似的,但是还是有很多基础的知识都不知道,比如下面介绍的关于Stroyboard的使用.(本篇博文随笔会不断补充关于Storyboard的使用技巧,持续更新) 目录: 1.使用Str ...
- ArrayList
各种原因,前两年做C语言去了,现在重新做JAVA, 感觉自己基础很不扎实,要好好学习啦, 先从简单的开始~ 以下内容基于jdk1.7.0_79源码: 什么是ArrayList 可以简单的认为是一个动态 ...
- Eclipse--Web项目中 .classpath、mymetadata、project文件的功用
Web项目中 .classpath..mymetadata..project文件的作用 创建Web Project时,会自动生成这个三个文件. 一..mymetadata文件 1.部署项目用的,把项目 ...
- C# 表复制和数据行的复制说明(Clone、ImportRow 、Copy )
/// <summary> /// 构建测试数据表 /// </summary> /// <returns></returns> private Dat ...
- SQL Server(八)——触发器
触发器是一类特殊的存储过程,在对表update,insert或delete语句时自动执行, 没有参数,没有返回值: 一.触发器类型 1.for触发器 在动作执行之后触发(增删改执行完成后,触发器中的代 ...
- SQL Server(一)——数据库基础知识
SQL:Structured Quety Language SQL SERVER是一个以客户/服务器(c/s)模式访问.使用Transact-SQL语言的关系型数据库管理子系统(RDBMS) DBMS ...
- 烂泥:学习ubuntu远程桌面(一):配置远程桌面
本文由秀依林枫提供友情赞助,首发于烂泥行天下 公司服务器目前安装的都是ubuntu 14.04系统,而且由于业务需要,需要使用到ubuntu的远程桌面功能.所以本篇文章都是围绕ubuntu的远程桌面来 ...
- 烂泥:使用nginx利用虚拟主机搭建WordPress博客
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 最近开始打算学习nginx web服务器,既然是学习还是以实用为目的的.我们在此以搭建WordPress博客为例. 搭建WordPress博客,我们需要 ...
- JQuery入门——进度条
越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...
- linux shell 之 crontab(定时任务)详解
1.定义: crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行.该词来源于希 ...