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>

親自試一試