AngularJS 动画
AngularJS 在 CSS 的帮助下提供动画过渡。
什么是动画？
动画是指 HTML 元素的转换给您带来运动的错觉。
例子：
选中复选框以隐藏 DIV：
<body ng-app="ngAnimate">
Hide the 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>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-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
这个ng-show和ng-hide指令添加或删除ng-hide阶级值。
其他指令添加了一个ng-enter进入 DOM 时的类值，以及ng-leave当它们从 DOM 中删除时的属性。
这个ng-repeat指令还添加了一个ng-moveHTML 元素更改位置时的 class 值。
此外，期间动画时，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-hideclass 中，过渡将花费 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>
亲自试一试 »