ng-show
//当ng-show=“false”时,自动添加 #animate.ng-hide { } #animate.ng-hide-add { } #animate.ng-hide-add.ng-hide-add-active { } //当ng-show=“true”时,自动添加 #animate.ng-hide-remove { } //当点击show时,自动添加 #animate.ng-hide-remove.ng-hide-remove-active { } //当点击show时,自动添加 过程:当点击按钮show,当下给关注的elem会去除ng-hide,同时补上3个class “ng-animate”,“ng-hide-remove”,“ng-hide-remove-active”。 当点击hide,angular会自动加ng-animate,ng-hide-add,ng-hide-add-active。 animate需要2秒完成,2秒后elem会去除之前所给的class。 AngularJS Animation是如何运作的? https://my.oschina.net/tommyfok/blog/298082 http://www.cnblogs.com/stooges/archive/2014/08/13/3910291.html 原理 实例 <ion-list> <div ng-repeat="group in groups"> <ion-item class="item-stable" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"> <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i> Group {{group.name}} </ion-item> <ion-item class="item-accordion" ng-repeat="item in group.items" ng-show="isGroupShown(group)"> {{item}} </ion-item> </div> </ion-list> 通过line-height的变化实现渐渐收起弹出 .list .item.item-accordion { line-height: 38px; padding-top: 0; padding-bottom: 0; transition: 0.09s all linear; } .list .item.item-accordion.ng-hide { line-height: 0px; }
ng-show的更多相关文章
- 【码在江湖】前端少侠的json故事(中)ng的json
ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...
- 不知道张(zhāng)雱(pāng)是谁?你out了!
张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...
- Flume NG Getting Started(Flume NG 新手入门指南)
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- matlab基础教程——根据Andrew Ng的machine learning整理
matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...
- 汇编语言标志位 含义 NV UP EI NG NZ AC PE CY
缩写原意: Overflow of = OV NV [No Overflow] Direction df = DN (decrement) UP (increment) Interrupt if = ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- 第一次部署Struts2时出现错误java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter.class
报如下错误 at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1720) at org. ...
- 汇编语言标记寄存器标记位_NV UP EI NG NZ AC PE CY
在8086CPU中,有一种标记寄存器,长度为16bit: 其中存储的信息被称为程序状态字(Program Status Word,PSW),以下将该寄存器简称为flag. 功能:1)用来存储相关指令的 ...
- 高可用Hadoop平台-Flume NG实战图解篇
1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...
- Ngnice-国内ng学习网站
今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...
随机推荐
- Subgradient Algorithm
Subgradient是一种可以优化不可微的凸函数的方法. 首先回顾凸函数的定义: $f(y) \geq f(x) + \nabla f(x)^T(y-x), all \hspace{2 pt} x, ...
- python2.7.6 , setuptools pip install, 报错:UnicodeDecodeError:'ascii' codec can't decode byte
今天折腾了一天,安装pyspider,由于依赖包众多,而且搜索到所有信息多是在linux平台和mac平台下的安装教程.可怜我试了n多版本,一直不成功. 最后发现有人说python的版本,不能低于2.7 ...
- C#创建windows服务并定时执行
一.创建window服务 1.新建项目-->选择Windows服务.默认生成文件包括Program.cs,Service1.cs 2.在Service1.cs添加如下代码: System.Tim ...
- 【Android】IntentService & HandlerThread源码解析
一.前言 在学习Service的时候,我们一定会知道IntentService:官方文档不止一次强调,Service本身是运行在主线程中的(详见:[Android]Service),而主线程中是不适合 ...
- [原]零基础学习在Android进行SDL开发系列文章
[原]零基础学习SDL开发之移植SDL2.0到Android [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图 [原]零基础学习SDL开发之在Android使用SDL2.0显示 ...
- PostgreSQL和Greenplum、Npgsql
PostgreSQL和Greenplum.Npgsql 想着要不要写,两个原因“懒”和“空”.其实懒和空也是有联系的,不是因为懒的写,而是因为对PostgreSQL和Npgsql的知识了解匮乏,也就懒 ...
- MYSQL开发性能研究——批量插入的优化措施
一.我们遇到了什么问题 在标准SQL里面,我们通常会写下如下的SQL insert语句. INSERT INTO TBL_TEST (id) VALUES(1); 很显然,在MYSQL中,这样的方 ...
- MyBatis知多少(7)持久层
持久层是适合使用MyBatis的地方.在面向对象的系统中,持久层主要关注对象(或者更精确地说应该是存储在那些对象中的数据)的存取.在企业应用程序中持久层通常用关系数据库系统来存储数据,虽然某些情况下其 ...
- EF Attach时已存在的处理方式
如果我们在先前的步骤中读取过数据,如 var list = db.Model.ToList(); 之后再,附加 var o = new Model { Id = 1 }; db.Model.Attac ...
- linux主机间复制文件
命令基本格式: 1.从 本地 复制到 远程 * 复制文件: * 命令格式: scp local_file remote_username@re ...