angularJs动画 --实例
1、angularJs动画
AngularJS 使用动画需要引入 angular-animate.min.js 库。还需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
实例1、
<body ng-app="ngAnimate">
隐藏 DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
ngAnimate 做了什么?
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：
ng-animateng-hide-animateng-hide-add(如果元素将被隐藏)ng-hide-remove(如果元素将显示)ng-hide-add-active(如果元素将隐藏)ng-hide-remove-active(如果元素将显示)
下面我们看一个实例：
这个实例主要标明：当你复选框选中时，让div背景透明度等于0慢慢变成1显示；
当你没选中复选框时，让div背景透明度等于1慢慢变成0隐藏；
css代码：
<style type="text/css"> #box{
width: 100px;
height: 100px;
background: blue;
transition: all 1s ease;//我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，
}
#box.ng-leave{
opacity:1,
}
#box.ng-leave-active{
opacity: 0;
}
#box.ng-enter{
opacity: 0;
}
#box.ng-enter-active{
opacity: 1;
}
</style>
html代码：
<body ng-controller="test">
<input type="checkbox" ng-model='myCheck'/>
<div ng-if="myCheck" id="box"></div>
//注意：引入angular-animate.js库
<script src="angular.min.js"></script>
<script src="angular-animate.js"></script>
<script>
var app=angular.module("app",['ngAnimate']);
app.controller("test",function($scope){
$scope.myCheck=true;
})
</script>
</body>
