AngularJS 动画

在 CSS 的帮助下，AngularJS 提供了动画过渡。

什么是动画？

动画是指 HTML 元素的变换给你带来一种运动的错觉。

实例

选中复选框来隐藏 DIV：

<body ng-app="ngAnimate">

隐藏 DIV：<input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

亲自试一试

应用程序不应充斥着动画，但一些动画可以使应用程序更易于理解。

我需要什么？

为了让你的应用程序为动画做好准备，您必须包含 AngularJS Animate 库：

<script src="https://cdn.staticfile.net/angular.js/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-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show 和 ng-hide 指令添加或删除 ng-hide 类值。

其他指令在进入 DOM 时添加 ng-enter 类值，并在从 DOM 中删除时添加 ng-leave 属性。

当 HTML 元素更改位置时，ng-repeat 指令还会添加 ng-move 类值。

此外，在动画过程中，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 秒，高度将从 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>

亲自试一试