<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:200px; height:200px; background:red; transition:1s all;}

.box.ng-hide-remove{ opacity:0;}

.box.ng-hide-remove-active{ opacity:1;}

.box.ng-hide-add{ opacity:1;}

.box.ng-hide-add-active{ opacity:0;}

</style>

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>

<script>

var m1 = angular.module('myApp',['ngAnimate']);

m1.controller('Aaa',['$scope',function($scope){

    $scope.bBtn = true;

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <input type="checkbox" ng-model="bBtn">

    <div ng-show="bBtn" class="box"></div>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:200px; height:200px; background:red;}

</style>

<script src="jquery-1.11.1.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>

<script>

var m1 = angular.module('myApp',['ngAnimate']);

m1.animation('.box',function(){

    return {

        addClass : function(element,sClass,done){

            //console.log(element);

            //console.log(sClass);

            //console.log(done);

            $(element).animate({width:0,height:0},1000,done);

        },

        removeClass : function(element,sClass,done){

            $(element).css({width:0,height:0});

            $(element).animate({width:200,height:200},1000,done);

        }

    };

});

m1.controller('Aaa',['$scope',function($scope){

    $scope.bBtn = true;

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <input type="checkbox" ng-model="bBtn">

    <!--<div ng-if="bBtn" class="box"></div>-->

    <div ng-show="bBtn" class="box"></div>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{ width:200px; height:200px; background:red;}

</style>

<script src="jquery-1.11.1.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>

<script>

var m1 = angular.module('myApp',['ngAnimate']);

m1.animation('.box',function(){

    return {

        leave : function(element,done){

            //console.log(element);

            //console.log(sClass);

            //console.log(done);

            $(element).animate({width:0,height:0},1000,done);

        },

        enter : function(element,done){

            $(element).css({width:0,height:0});

            $(element).animate({width:200,height:200},1000,done);

        }

    };

});

m1.controller('Aaa',['$scope',function($scope){

    $scope.bBtn = true;

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <input type="checkbox" ng-model="bBtn">

    <!--<div ng-if="bBtn" class="box"></div>-->

    <div ng-if="bBtn" class="box"></div>

</div>

</body>

</html>

Angular 学习笔记——ng-animate的更多相关文章

  1. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  2. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  3. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  4. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  5. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  6. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  7. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  8. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  10. Angular 学习笔记 ( CDK - Accessibility )

    @angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家 ...

随机推荐

  1. C/C++ 运算符 & | 运算

    C/C++中的“按位或 规则: 1|1=1 1|0=1 0|1=1 0|0=0 按位或运算 按位或运算符“|”是双目运算符.其功能是参与运算的两数各对应的二进位(也就是最后一位)相或.只要对应的二个二 ...

  2. ViewPager实现选项卡功能

    1.ViewPager实现Tab 目录结构:

  3. POCO库中文编程参考指南（2）基本数据类型（Poco/Types.h）

    POCO库中文编程参考指南(2)基本数据类型 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmail.com (# -> ...

  4. AC日记——Count on a tree II spoj

    Count on a tree II 思路: 树上莫队: 先分块,然后,就好办了: 来,上代码: #include <cmath> #include <cstdio> #inc ...

  5. SOAP很2的问题

    小弟说实话不很懂这方面的东西,但上头要求比较一下这两种方式的优劣,欢迎大家赐教啊!“按照一定的网络传输协议,通过符合 FTP/TCP/IP等协议的数据报或者以SOAP的方式传送到接口服务器.”这是出处 ...

  6. 洛谷 U19159 采摘毒瘤

    题目背景 Salamander见到路边有如此多的毒瘤,于是见猎心喜,从家里拿来了一个大袋子,准备将一些毒瘤带回家. 题目描述 路边共有nn 种不同的毒瘤,第i 种毒瘤有k_i 个,每个需要占据d_i  ...

  7. Uva 11542 Square

    题目中说数组中的数的最大质因子不超过500,我们筛出≤500的质数,然后考虑对每个质数列一个方程组.. 然后这几乎就是高斯消元求解异或方程组的模板题了.... 注意答案是 2^(自由元数量)-1,因为 ...

  8. hdu 1599 find the mincost route 最小环

    题目链接:HDU - 1599 杭州有N个景区,景区之间有一些双向的路来连接,现在8600想找一条旅游路线,这个路线从A点出发并且最后回到A点,假设经过的路线为V1,V2,....VK,V1,那么必须 ...

  9. 六. 异常处理6.try语句的嵌套

    Try语句可以被嵌套.也就是说,一个try语句可以在另一个try块内部.每次进入try语句,异常的前后关系都会被推入堆栈.如果一个内部的try语句不含特殊异常的catch处理程序,堆栈将弹出,下一个t ...

  10. 用Xcode6的Leaks检测内存泄漏

    用xcode打开项目之后,选择Product - Profile: 在弹出的窗口中选择Leaks: 然后在设备解锁的情况下,选择Leaks再点击左上角的红色按钮开始运行APP: 红色的柱子表示有内存泄 ...