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>
試一試»