AngularJS 動畫
AngularJS 在 CSS 的幫助下提供了動畫過渡效果。
什麼是動畫？
動畫是指 HTML 元素的轉換給您帶來運動的錯覺。
示例
勾選複選框以隱藏 DIV
<body ng-app="ngAnimate">
隱藏 DIV： <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
自己動手試一試 »
應用程式不應該充滿動畫，但一些動畫可以使應用程式更容易理解。
我需要什麼？
為了使您的應用程式支援動畫，您必須包含 AngularJS Animate 庫
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
然後您必須在您的應用程式中引用 ngAnimate 模組
<body ng-app="ngAnimate">
如果您的應用程式有名稱，請將 ngAnimate 新增為應用程式模組中的依賴項
示例
<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>
自己動手試一試 »
ngAnimate 的作用是什麼？
ngAnimate 模組新增和移除類。
ngAnimate 模組不為您的 HTML 元素新增動畫，但當 ngAnimate 檢測到某些事件（例如 HTML 元素的隱藏或顯示）時，該元素會獲得一些預定義類，這些類可用於製作動畫。
AngularJS 中新增/移除類的指令有：
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show 和 ng-hide 指令新增或移除 ng-hide 類值。
其他指令在進入 DOM 時新增 ng-enter 類值，在從 DOM 移除時新增 ng-leave 屬性。
ng-repeat 指令還在 HTML 元素改變位置時新增 ng-move 類值。
此外，在動畫過程中，HTML 元素將具有一組類值，這些類值將在動畫完成後移除。例如：ng-hide 指令將新增以下類值：
ng-animateng-hide-animateng-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 秒，高度將平滑地從 100px 變為 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 動畫將執行，它將平滑地將高度從 100px 更改為 0
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
自己動手試一試 »
