- 將ngAnimate注入模型以啟用angular動(dòng)畫
var app = angular.module('myApp', ['ngAnimate']);
ngAnimate 做了什么?
ngAnimate 模型可以添加或移除 class 乡话。
ngAnimate 模型并不能使 HTML 元素產(chǎn)生動(dòng)畫败晴，但是 ngAnimate 會(huì)監(jiān)測(cè)事件囚衔，提供一個(gè)鉤子冰更，如果事件發(fā)生 ngAnimate 就會(huì)添加預(yù)定義的class憨颠。此時(shí)利用css3的transition即可;
AngularJS 添加/移除 class 的指令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值勿锅。
其他指令會(huì)在進(jìn)入 DOM 會(huì)添加 ng-enter 類接剩，移除 DOM 會(huì)添加 ng-leave 類撬陵。
當(dāng) HTML 元素位置改變時(shí)珊皿，ng-repeat 指令同樣可以添加 ng-move 類 。
此外巨税， 在動(dòng)畫完成后蟋定，HTML 元素的類集合將被移除。例如： ng-hide 指令會(huì)添加一下類：
ng-animate
ng-hide-animate
ng-hide-add (如果元素將被隱藏)
ng-hide-remove (如果元素將顯示)
ng-hide-add-active (如果元素將隱藏)
ng-hide-remove-active (如果元素將顯示)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">
<h1>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
