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

拷贝试试

<!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. java web面试

    1. session和cookie的区别和联系,session的生命周期,多个服务部署时session管理. 原博http://blog.csdn.net/shuaishenkkk/article/d ...

  2. windows(win10)下的mysql解压版安装

    1. 到mysql官网 下载mysql : http://dev.mysql.com/downloads/mysql/   ,会提示登陆,注册一个就行了,公司名什么的随便填. 注意区分32,64位.我 ...

  3. K-Means 算法（转载）

    K-Means 算法 在数据挖掘中, k-Means 算法是一种 cluster analysis 的算法,其主要是来计算数据聚集的算法,主要通过不断地取离种子点最近均值的算法. 问题 K-Means ...

  4. Angular - - angular.equals

    angular.equals 对比两个对象/值是否相等.支持值类型.正则表达式.数组和对象. 如果下列至少有一个是正确的,则将两个对象/值视为相等. 两个对象/值能通过===比较. 两个对象/值是同一 ...

  5. MapReduce深度分析(二)

    MapReduce深度分析(二) 五.JobTracker分析 JobTracker是hadoop的重要的后台守护进程之一,主要的功能是管理任务调度.管理TaskTracker.监控作业执行.运行作业 ...

  6. 大数据时代的杀手锏----Tachyon

    一.Tachyon系统的简介 Tachyon是一个分布式内存文件系统,可以在集群里以访问内存的速度来访问存在tachyon里的文件.把 Tachyon是架构在最底层的分布式文件存储和上层的各种计算框架 ...

  7. use strict 的优点

    JavaScript严格模式详解 http://blog.csdn.net/airingyuan/article/details/25036297 http://ourjs.com/detail/52 ...

  8. 在Eclipse中提交SVN项目的时候注意提交项目信息

    提交项目的时候,注意提交.classpath,.project和.settings文件夹: 这些是项目的信息,别人下载的时候才能正确显示为Eclipse项目:

  9. java_db常见错误总结

    1.java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符 在拼写seq时是否存在存在特殊字符,如:常见语句后面添加了;2.ORA-01722:无效数字解决 ...

  10. C#文本框允许使用ctrl+A

    C#文本框中默认是不允许使用全选的.可以通过以下事件完成: private void textBox1_KeyDown(object sender, KeyEventArgs e) { if (e.C ...