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

拷贝试试

<!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. Spring Security——核心类简介——获得登录用户的相关信息

    核心类简介 目录 1.1     Authentication 1.2     SecurityContextHolder 1.3     AuthenticationManager和Authenti ...

  2. AC日记——统计难题 hdu 1251

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  3. @dynamic、@synthesize

    声明property属性后,有2种实现选择: @synthesize 编译器期间,让编译器自动生成getter/setter方法. 当有自定义的存或取方法时,自定义会屏蔽自动生成该方法 @dynami ...

  4. oracle语句总结（一）

    1,建外键 新建两个表来实现外键的关联. create table main_tab ( id number, name varchar2(30) ); create table sub_tab ( ...

  5. jQuery wrap wrapAll wrapInner使用

    jQuery wrap wrapAll wrapInner使用 <%@ page language="java" import="java.util.*" ...

  6. XML之XPath操作

    在学习XPath之前你应该对XML的节点,元素,属性,原子值(文本),处理指令,注释,根节点(文档节点),命名空间以及对节点间的关系如:父(Parent),子(Children),兄弟(Sibling ...

  7. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Spring 基于Java的Bean声明

    Spring 基于Java的Bean声明 使用@Configuration进行设置: Xml: <?xml version="1.0" encoding="UTF- ...

  9. jquery属性的相关js实现方法

    有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法 ...

  10. java算法 蓝桥杯 高精度加法

    问题描述 在C/C++语言中,整型所能表示的范围一般为-231到231(大约21亿),即使long long型,一般也只能表示到-263到263.要想计算更加规模的数,就要用软件来扩展了,比如用数组或 ...