//当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>
            &nbsp;
            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的更多相关文章

  1. 【码在江湖】前端少侠的json故事(中)ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  2. 不知道张(zhāng)雱(pāng)是谁?你out了!

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  3. Flume NG Getting Started(Flume NG 新手入门指南)

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  4. matlab基础教程——根据Andrew Ng的machine learning整理

    matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...

  5. 汇编语言标志位 含义 NV UP EI NG NZ AC PE CY

    缩写原意: Overflow of = OV NV [No Overflow] Direction df = DN (decrement) UP (increment) Interrupt if = ...

  6. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  7. 第一次部署Struts2时出现错误java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter.class

    报如下错误 at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1720) at org. ...

  8. 汇编语言标记寄存器标记位_NV UP EI NG NZ AC PE CY

    在8086CPU中,有一种标记寄存器,长度为16bit: 其中存储的信息被称为程序状态字(Program Status Word,PSW),以下将该寄存器简称为flag. 功能:1)用来存储相关指令的 ...

  9. 高可用Hadoop平台-Flume NG实战图解篇

    1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...

  10. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

随机推荐

  1. 简谈ubuntu之DIY发行版

    2007.05.13    二十一世纪到了,每个人都强调自己的个性,于是一种叫做DIY的东西悄然兴起. 操作系统作为全人类智慧的结晶,自然DIY起来难度极大,因而DIY出一个操作系统成就感绝对比买宜家 ...

  2. CG

    //设置线的宽度 CGContextSetLineWidth(ctx, 12); //设置线的连接处 (拐点) CGContextSetLineJoin(ctx, kCGLineJoinRound ) ...

  3. zmq 学习笔记

    0. PUB/SUB, XPUB/XSUB filtering happens at publisher sides when sockets are using a connected protoc ...

  4. 如何查看distirbution agent的执行进度

    在transactional replication troubleshooting的过程中,经常会遇到下面的场景: 客户在发布端执行了一个几百万行的更新,结果导致性能下降. 客户很想知道目前dist ...

  5. bootstrap插件学习-bootstrap.popover.js

    先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...

  6. 扁平化设计的最新趋势 – 长阴影(Long Shadow)

    随着互联网的发展,网页设计变得越来越复杂,如今设计的外观和感觉实现网站功能说使用的开发技术一样重要.互联网的功能远远不只是基本的信息共享,现在人们对网站的期望是远远大于几年前的. 如今,HTML5 & ...

  7. ionic+angular+cordova 安卓环境搭建

    1.java环境配置 下载java jdk 百度搜索java jdk安装完后在cmd窗口输入Java -version 显示以下即为安装成功.然后把java jdk配置到环境变量. (1)选择[新建系 ...

  8. ASP.NET MVC 使用 IOC框架 AutoFac 自动释放数据库资源

    每次使用using或者dispose来释放资源会比较麻烦,作为一个会偷懒的程序员来说当然不能接受了. 一.引用 autofac.dll和autofac.integration.mvc.dll 二.打开 ...

  9. Java魔法堂:打包知识点之jar

    一.前言    通过eclipse导出jar包十分方便快捷,但作为码农岂能满足GUI的便捷呢?所以一起来CLI吧! 二.JAR包 JAR包是基于ZIP文件格式,用于将多个.java文件和各种资源文件, ...

  10. UINavigationItem和UItabBarItem的区别详解

    一.UINavigationItem 1> 获得方式 self.navigationItem // self是指控制器 2> 作用 可以用来设置当前控制器顶部导航栏的内容 // 设置导航栏 ...