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

拷贝试试

<!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. samba.conf 范例

    # Sample configuration file for the Samba suite for Debian GNU/Linux. # # This is the main Samba con ...

  2. Grunt-几个常用的任务配置，加载，执行的写法

    http://www.gruntjs.net/sample-gruntfile Gruntfile 实例 下面就针对一个 Gruntfile 案例做简单分析,也可以作为一个实例使用: module.e ...

  3. Javascript中alert</script>的方法

    Javascript中alert</script>的方法: <%@ page language="java" import="java.util.*&q ...

  4. [Machine Learning] 深度学习中消失的梯度

    好久没有更新blog了,最近抽时间看了Nielsen的<Neural Networks and Deep Learning>感觉小有收获,分享给大家. 了解深度学习的同学可能知道,目前深度 ...

  5. Java错题

    加粗为正确答案,绿色为错选答案 1.对于以下代码: for ( int i=0; i<10; i++)  System.out.println(i); for循环后,i的值是多少? A.i不再存 ...

  6. 《JAVASCRIPT高级程序设计》闭包

    一.闭包的概念 闭包是JAVASCRIPT中最重要的概念之一,闭包是指有权访问另一个函数作用域中变量的函数:创建闭包常见的方式,就是在一个函数内部,创建另一个函数.以下的例子创建了一个闭包,加粗的两行 ...

  7. [转载] HTTP协议详解

    转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的 ...

  8. [html5] 学习笔记-编辑 API 之 Range 对象（一）

    1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...

  9. 有趣的++i和i++

    作为一个天天和代码“约会”的人来说i++和++i这玩意再熟悉不过了,因为使用频率太高了. 虽然如此,但也未必见得我们真的了解她,不妨猜猜下面的输出结果. #inlcude <stdio.h> ...

  10. 游戏音频技术备忘 （三） 集成Wwise到Unreal Engine

    当前受众较广的商业游戏引擎有 Unreal Engine.Unity.cocos2d-x等,在音频领域的第三方中间件则有Wwise.FMOD.Criware等,言多且烦,我们首先集成Wwise到 Un ...