这是我第一次写博客，请大家多多指教^^

拷贝试试

<!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 原理，详解的更多相关文章

  1. I2C 基础原理详解

    今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...

  2. Zigbee组网原理详解

    Zigbee组网原理详解 来源:互联网 作者:佚名2015年08月13日 15:57   [导读] 组建一个完整的zigbee网状网络包括两个步骤:网络初始化.节点加入网络.其中节点加入网络又包括两个 ...

  3. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  4. SSL/TLS 原理详解

    本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...

  5. 锁之“轻量级锁”原理详解(Lightweight Locking)

    大家知道,Java的多线程安全是基于Lock机制实现的,而Lock的性能往往不如人意. 原因是,monitorenter与monitorexit这两个控制多线程同步的bytecode原语,是JVM依赖 ...

  6. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  7. 节点地址的函数list_entry()原理详解

    本节中,我们继续讲解,在linux2.4内核下,如果通过一些列函数从路径名找到目标节点. 3.3.1)接下来查看chached_lookup()的代码(namei.c) [path_walk()> ...

  8. WebActivator的实现原理详解

    WebActivator的实现原理详解 文章内容 上篇文章,我们分析如何动态注册HttpModule的实现,本篇我们来分析一下通过上篇代码原理实现的WebActivator类库,WebActivato ...

  9. Influxdb原理详解

    本文属于<InfluxDB系列教程>文章系列,该系列共包括以下 15 部分: InfluxDB学习之InfluxDB的安装和简介 InfluxDB学习之InfluxDB的基本概念 Infl ...

  10. 【转】VLAN原理详解

    1.为什么需要VLAN 1.1 什么是VLAN? VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.V ...

随机推荐

  1. Nodejs之编辑器ueditor

    ueditor编辑器的使用说明. 最近在找nodejs前台界面可以编辑文字发表文章的工具,后来找到了ueditor,感觉还不错,就拿来使用了一下,使用过程如下. 1.下载及准备 下载ueditor,官 ...

  2. n皇后问题 [随机化算法，拉斯维加斯算法]

    问题: 如何能够在 n×n 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上. 分析: 这题常规的解法应该是回溯法, ...

  3. 贴一份用delphi修改注册表改网卡MAC地址的代码

    //提示:此代码需要use Registry, Common; function WriteMAC(model:integer):integer; var reg:TRegistry; begin r ...

  4. JS 继承(类式 与 原型式)

    1. /* -- 类式继承 -- *///先声明一个超类 function Person(name) { this.name = name;}//给这个超类的原型对象上添加方法 getName Per ...

  5. TIMESTAMP和DATETIME哪个好

    日期范围 TIMESTAMP 支持从'1970-01-01 00:00:01′ 到 '2038-01-19 03:14:07′ UTC. 这个时间可能对目前正在工作的人来说没什么问题,可以坚持到我们退 ...

  6. 如何使excel表格的内容自动添加前缀

    一.假设是要在一列的单元格内容前加上固定的内容,则 方法一在原单元格实现,分两种情况 如果原单元格的内容是数字内容,要在原数字前添加"ABC"这样的前缀则选中这些单元格----右键 ...

  7. lufylegend库 LGraphics绘制图片

    lufylegend库 LGraphics绘制图片 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. 《你不知道的js》 ------1.作用域是什么

    相关定义 引擎:从头到尾负责整个JavaScript程序的编译及执行过程. 编译器:负责语法分析及代码生成等. 作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规 ...

  9. CSS页面渲染优化属性will-change

    前面的话   当我们通过某些行为(点击.移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿.而CSS属性wi ...

  10. Unity 容器教程

    文章摘自: http://www.cnblogs.com/qqlin/archive/2012/10/18/2720830.html