angular : ng-animate : ng-show 原理，详解
这是我第一次写博客，请大家多多指教^^
拷贝试试
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>思涂客 Stooges</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-animate.js"></script>
<script>
angular.module('app',['ngAnimate']).
controller('ctrl', ['$scope', function ($scope) {
$scope.showButton = function () {
$scope.expression = true;
}
$scope.hideButton = function () {
$scope.expression = false;
}
}])
</script>
<style>
#animate{ background-color:red;-webkit-transition:all linear 2s; transition:all linear 2s; opacity:1;}
#animate.ng-hide{ opacity:0;}
/*一下会慢慢解释*/
#animate.ng-hide { }
#animate.ng-hide-add { }
#animate.ng-hide-add.ng-hide-add-active { }
#animate.ng-hide-remove { }
#animate.ng-hide-remove.ng-hide-remove-active { }
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<button ng-click="showButton()">show</button>
<button ng-click="hideButton()">hide</button>
<div id="animate" ng-show="expression">"思涂客"</div>
</body>
</html>
简单介绍ng-show：通常使用在需要show/hide的elem，通过一个表达式完成动作。
当angular开始compile时，会发现ng-show里的表达式是undefind，相等于false，这回angular会自动给一个class叫ng-hide。这ng-hide会给elem display：none。点击按钮show，会给expression换成true，这回把ng-hide给拿掉，elem就会看见了。以此类推～
怎样可以完成更多的animation？
#animate.ng-hide { } //当ng-show=“false”时，自动添加
#animate.ng-hide-add { } //当点击hide时，自动添加
#animate.ng-hide-add.ng-hide-add-active { } //当点击hide时，自动添加
#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”。
animate需要2秒完成，2秒后elem会去除之前所给的class。如果现在点击hide，angular会自动加ng-animate，ng-hide-add，ng-hide-add-active。
angular : ng-animate : ng-show 原理，详解的更多相关文章
- I2C 基础原理详解
今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...
- Zigbee组网原理详解
Zigbee组网原理详解 来源:互联网 作者:佚名2015年08月13日 15:57 [导读] 组建一个完整的zigbee网状网络包括两个步骤:网络初始化.节点加入网络.其中节点加入网络又包括两个 ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
- SSL/TLS 原理详解
本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...
- 锁之“轻量级锁”原理详解(Lightweight Locking)
大家知道,Java的多线程安全是基于Lock机制实现的,而Lock的性能往往不如人意. 原因是,monitorenter与monitorexit这两个控制多线程同步的bytecode原语,是JVM依赖 ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- 节点地址的函数list_entry()原理详解
本节中,我们继续讲解,在linux2.4内核下,如果通过一些列函数从路径名找到目标节点. 3.3.1)接下来查看chached_lookup()的代码(namei.c) [path_walk()> ...
- WebActivator的实现原理详解
WebActivator的实现原理详解 文章内容 上篇文章,我们分析如何动态注册HttpModule的实现,本篇我们来分析一下通过上篇代码原理实现的WebActivator类库,WebActivato ...
- Influxdb原理详解
本文属于<InfluxDB系列教程>文章系列,该系列共包括以下 15 部分: InfluxDB学习之InfluxDB的安装和简介 InfluxDB学习之InfluxDB的基本概念 Infl ...
- 【转】VLAN原理详解
1.为什么需要VLAN 1.1 什么是VLAN? VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.V ...
随机推荐
- 移动硬盘/U盘装Windows 7旗舰版（VHD版）
真正的移动版WIN7,在移动硬盘/U盘上运行的WIN7 工具准备 - 联想Y450本本,已安装Windows 7旗舰版(或者WINPE3.0版),用来给移动WIN7做引导 -Win7.vhd,15G, ...
- Intellij Idea 配置并发布tomcat项目
作为一个菜鸟,我还是很想提高自己.但是既然说了是菜鸟,当然很容易半路折翅 从刚听说intellij idea(以下简称 idea)到现在,应该有超过一个月了吧,我的电脑装了三四次系统了(刚换了一台电脑 ...
- 前言《iOS网络高级编程：iPhone和iPad的企业应用开发》（书籍学习）
本书内容: 在客户端设备与服务器之间执行HTTP请求 管理客户端设备与服务器之间的数据负载 处理HTTP请求的错误 保护网络通信 改进网络通信的性能 执行Socket层的通信 实现推送通知 单个设备上 ...
- php绘图-报表
1.PHP报表的创建,通过绘图,过程 要先开启gb库, 可以使用jpgraph(绘图框架)快速制作一些图形 报表的作用:可以制作一些统计图,地形图,分布图等,还可以做验证码图片(通过在画布上加字和干扰 ...
- jpg图片在开发板上显示
文件IO项目: 在开发板屏幕上循环显示目录里的图片 a.按照一定的间隔循环显示目录里的bmp图片 b.实现手指滑动来显示目录里的图片(bmp,jpg)上一张,下一张 d1: 1.能操控屏幕(查询开发板 ...
- HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传
这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...
- HTML模块化：使用HTML5 Boilerplate模板
HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Modernizr 作者.yayQuery 播客主持人)主导的“前端开 ...
- 关于P，NP，NPC和NP-hard的通俗解释
这些概念以前老是犯糊涂,今天整清楚.摘要:P: Polynomial SolvableNP: Non-determinstic Polynomial Solvable 0)词语解释:Polynomia ...
- JSP中使用Taglib
http://blog.163.com/jany_1016/blog/static/4604400620091112114127341/ http://blog.csdn.net/yuebinghao ...
- Spring MVC 返回NULL时客户端用$.getJSON的问题
如果Spring MVC返回是NULL,那么客户端的$.getJSON就不会触发: 必须返回点什么东西: 如果返回的是一个字符串,客户端的$.getJSON也不会触发:把字符串 包装成List< ...