AngularJS提供动画过渡，与CSS的帮助。
什么是动画？
动画是当一个HTML元素的转换让你运动的错觉。
例：
选中该复选框隐藏DIV：
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
试一试»  | 应用程序不应该充满动画，但有些动画可以使应用程序更容易理解。 |
|---|
我需要什么？
为了让您的应用程序准备好动画，你必须包括AngularJS动画库：
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
然后，你必须参照ngAnimate在你的应用程序模块：
<body ng-app="ngAnimate"> 或者，如果你的应用程序有一个名称，添加ngAnimate您的应用程序模块的依赖关系：
例
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script> 试一试» 是什么ngAnimate做什么？
该ngAnimate模块添加和删除类。
该ngAnimate模块没有动画的HTML元素，但是当ngAnimate注意到某些事件，比如HTML元素的隐藏或显示，元素得到可以用来做动画一些预先定义的类。
在AngularJS谁添加的指令/删除类：
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
在ng-show和ng-hide指令将添加或删除ng-hide类值。
其他指令添加ng-enter ，当他们进入的DOM类值，和一个ng-leave当它们从DOM去除属性。
在ng-repeat指令还增加了ng-move时的HTML元素改变位置类值。
此外，在动画过程中 ，HTML元素将具有一组类值，当动画完成其中将被删除的。 例： ng-hide指令将添加这些类值：
-
ng-animate -
ng-hide-animate -
ng-hide-add（如果元素会被隐藏） -
ng-hide-remove（如果该元素将被显示） -
ng-hide-add-active（如元素会被隐藏） -
ng-hide-remove-active（如果该元素将被显示）
动画使用CSS
我们可以使用CSS转换或CSS动画以动画的HTML元素。 本教程都将告诉你。
要了解更多关于CSS动画，学习我们的CSS教程过渡和我们的CSS动画教程 。
CSS过渡
CSS转换允许您更改CSS属性值顺利，从一个值到另一个，在给定的时间：
例：
当DIV元素得到.ng-hide类，过渡将可取0.5秒，而高度将顺利地从100像素变为0：
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
试一试» CSS动画
CSS动画允许您更改CSS属性值顺利，从一个值到另一个，在给定的时间：
例：
当DIV元素得到.ng-hide一流， myChange动画将运行，这将顺利地从100像素变为0的高度：
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
试一试»