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 ...
随机推荐
- Nodejs的模块实现
在Node中引入模块,需要经历如下3个步骤:(1)路径分析(2)文件定位(3)编译执行 Node中模块分为两类: 一是Node提供的模块——核心模块.这部分在Node源代码的编译过程中,编译进了二进制 ...
- javascript-外观模式
外观模式笔记 1. 为一组复杂的子系统接口提供一个更高级的统一接口, 通过这个接口使得对子系统接口的访问更容易: 2. 简化底层接口的复杂性,解决浏览器兼容性问题. 3.也会用于对底层结构兼容性做 ...
- 十五天精通WCF——第十二天 说说wcf中的那几种序列化
我们都知道wcf是由信道栈组成的,在我们传输的参数走到传输信道层之前,先需要经过序列化的过程,也就是将参数序列化为message,这篇 我们就来说说这里的序列化,蛮有意思的,可能初学者也明白,在wcf ...
- CSS之旅——第三站 强大的伪选择器
说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼...首先 我们可以在VS里面提前预览一下. 可以看到,上面的伪类有很多很多, ...
- SQL Server 2008 R2——T-SQL 存储过程 返回表
==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...
- Linux计时器
Linux中, 系统为每个系统都维护了三种计时器,分别为: 真实计数器, 虚拟计时器以及实用计时器, 一般情况下都使用真实计时器 getitimer()/setitimer() //读取/设置内部计时 ...
- 学会使用简单的 MySQL 常用操作
一.MySQL 数据库的基本安装 # yum 安装 mysql 版本:5.1.73 [root@mysql ~]# yum install -y mysql-server mysql # 启动 MyS ...
- iNeedle系统使用注意事项
1.不能监控https协议的报文 目前只能监控http协议的网站,对于https协议(加密)的网站暂时不支持监控,甚至连流量都没有作统计,在测试iNeedle的时候也要多加注意.
- MarkDown插入图片
MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...
- CoCreateInstance调用COM接口伪流程
在编写组件程序时,经常会使用CoCreateInstance直接取COM组件的接口,非常方便,那CoCreateInstance到底干了些什么事呢?1.CoCreateInstance取COM组件的接 ...