動(dòng)畫
什么是動(dòng)畫？
動(dòng)畫是指 HTML 元素的變換給你帶來(lái)一種運(yùn)動(dòng)的錯(cuò)覺。
實(shí)例
選中復(fù)選框來(lái)隱藏 DIV：
<body ng-app="ngAnimate"> 隱藏 DIV：<input type="checkbox" ng-model="myCheck"> <div ng-hide="myCheck"></div> </body>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
應(yīng)用程序不應(yīng)充斥著動(dòng)畫，但一些動(dòng)畫可以使應(yīng)用程序更易于理解。
我需要什么？
為了讓你的應(yīng)用程序?yàn)閯?dòng)畫做好準(zhǔn)備，您必須包含 AngularJS Animate 庫(kù)：
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>
然后，你必須在應(yīng)用程序中引用 ngAnimate 模塊：
<body ng-app="ngAnimate">
或者，如果您的應(yīng)用程序有名稱，請(qǐng)將 ngAnimate 添加為應(yīng)用程序模塊中的依賴項(xiàng)：
實(shí)例
<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>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
ngAnimate 的作用是什么？
ngAnimate 模塊添加和刪除類。
ngAnimate 模塊不會(huì)使你的 HTML 元素動(dòng)畫化，但是當(dāng) ngAnimate 注意到某些事件（如 HTML 元素的隱藏或顯示）時(shí)，該元素會(huì)獲得一些預(yù)定義的類，這些類可用于制作動(dòng)畫。
AngularJS 中添加/刪除類的指令包括：
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show 和 ng-hide 指令添加或刪除 ng-hide 類值。
其他指令在進(jìn)入 DOM 時(shí)添加 ng-enter 類值，并在從 DOM 中刪除時(shí)添加 ng-leave 屬性。
當(dāng) HTML 元素更改位置時(shí)，ng-repeat 指令還會(huì)添加 ng-move 類值。
此外，在動(dòng)畫過(guò)程中，HTML 元素將具有一組類值，動(dòng)畫完成后將刪除這些類值。例如：ng-hide 指令將添加這些類值：
ng-animateng-hide-animateng-hide-add（如果要隱藏元素）ng-hide-remove（如果要顯示元素）ng-hide-add-active（如果要隱藏元素）ng-hide-remove-active（如果要顯示元素）
使用 CSS 進(jìn)行動(dòng)畫處理
我們可以使用 CSS 過(guò)渡或 CSS 動(dòng)畫來(lái)為 HTML 元素添加動(dòng)畫效果。本教程將向你展示這兩者。
要了解有關(guān) CSS 動(dòng)畫的更多信息，請(qǐng)學(xué)習(xí)我們的 CSS 過(guò)渡教程和 CSS 動(dòng)畫教程。
CSS 過(guò)渡
CSS 過(guò)渡允許你在給定的持續(xù)時(shí)間內(nèi)，將一個(gè) CSS 屬性值平滑地更改為另一個(gè)值：
實(shí)例
當(dāng) DIV 元素獲得 .ng-hide 類時(shí)，過(guò)渡將持續(xù) 0.5 秒，高度將從 100px 平滑過(guò)渡到 0：
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS 動(dòng)畫
CSS 動(dòng)畫允許你在給定的持續(xù)時(shí)間內(nèi)，將一個(gè) CSS 屬性值平滑地更改為另一個(gè)值：
實(shí)例
當(dāng) DIV 元素獲得 .ng-hide 類時(shí)，將運(yùn)行 myChange 動(dòng)畫，該動(dòng)畫將高度從 100px 平滑過(guò)渡到 0：
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例