<!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. linux和shell关系

    坚持知识分享,该文章由Alopex编著, 转载请注明源地址: http://www.cnblogs.com/alopex/   索引: 什么是shell shell的分类 shell脚本的执行方式   ...

  2. selenium的动作链 actionchains

    click(on_element=None) ——单击鼠标左键 click_and_hold(on_element=None) ——点击鼠标左键,不松开 context_click(on_elemen ...

  3. 解决：java.lang.ArrayIndexOutOfBoundsException: 160 at com.alibaba.fastjson.serializer.SerializeWriter.writeStringWithDoubleQuote(SerializeWriter.java:868)

    今天线上遇到一个问题,从hbase里读取出来的数据在转换json后输出时出现异常: java.lang.ArrayIndexOutOfBoundsException: 160 at com.aliba ...

  4. UVALive 6451:Tables(模拟 Grade D)

    VJ题目链接 题意:模拟输出表格 思路:模拟……很暴力 代码: #include <cstdio> #include <cstring> #include <cstdli ...

  5. ubuntu常用终端命令

    # ctrl + l - 清屏 . cLear# ctrl + c - 终止命令. # ctrl + d - 退出 shell,好像也可以表示EOF. # ctrl + z - 将当前进程置于后台,f ...

  6. Python与数据库[2] -> 关系对象映射/ORM[2] -> 建立声明层表对象的两种方式

    建立声明层表对象的两种方式 在对表对象进行建立的时候,通常有两种方式可以完成,以下是两种方式的建立过程对比 首先导入需要的模块,获取一个声明层 from sqlalchemy.sql.schema i ...

  7. Maven笔记：

    启动tomcat的时候报这样的错误:java.lang.ClassNotFoundException: org.springframework.web.filter.CharacterEncoding ...

  8. SQLite中的内连接简化技巧

    SQLite中的内连接简化技巧   在SQLite中,通过内连接可以将两个表通过条件表达式关联起来,构成一个新记录集或视图.形式如下:   SELECT ... FROM t1 JOIN t2 ON ...

  9. Java多线程中的异常处理

    在java多线程程序中,所有线程都不允许抛出未捕获的checked exception,也就是说各个线程需要自己把自己的checked exception处理掉.这一点是通过java.lang.Run ...

  10. luogu P1091 合唱队形

    题目描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1,T2, ...