Angularjs應用程序中的JavaScript動畫

核心要點

• AngularJS 是構建單頁 Web 應用的優秀框架，其動畫支持是其關鍵特性之一。 JavaScript 動畫可用於為 AngularJS 應用添加動畫效果，CSS 和 JavaScript 動畫的區別僅在於定義方式。
• 自定義 Angular JavaScript 動畫在 Angular 模塊的 animation 方法中定義。動畫名稱以點號開頭，每個動畫操作都接受兩個參數：表示將應用動畫的當前 DOM 元素的對象，以及動畫完成後調用的回調函數。
• 動畫可以應用於各種 AngularJS 指令，例如 ng-view、ng-repeat、ng-hide 和自定義指令。例如，可以在 ng-view 指令中添加動畫，以便在用戶在視圖之間切換時產生視覺效果；或者在 ng-repeat 指令中添加動畫，以便在發生更改時直觀地指示。
• 動畫雖然可以使應用程序更生動，但過度使用動畫會導致應用程序變慢，並可能使最終用戶感到不知所措。因此，應優化和策略性地使用動畫。

AngularJS 是一個功能豐富的框架，用於創建單頁 Web 應用程序，它提供了構建豐富且交互式應用程序所需的所有功能。 Angular 的關鍵特性之一就是支持動畫。

我們可以為應用程序的一部分添加動畫，以指示正在發生的更改。在我上一篇文章中，我介紹了 Angular 應用程序中 CSS 動畫的支持。在本文中，我們將了解如何利用 JavaScript 為 AngularJS 應用程序添加動畫。

在 Angular 中，CSS 和 JavaScript 動畫之間唯一的區別在於它們的定義方式。已定義動畫的使用方式沒有區別。首先，我們需要將 ngAnimate 模塊加載到應用程序的根模塊中。

angular.module('coursesApp', ['ngAnimate']);

JavaScript 動畫中要處理的動畫事件也保持不變。以下是支持動畫的指令列表及其針對不同操作的事件：

指令事件ng-viewenter, leave ng-includeenter, leaveng-switchenter, leaveng-ifenter, leaveng-repeatenter, leave, moveng-showadd, removeng-hideadd, removeng-classadd, remove

上面的列表與上一篇文章中的列表相同，但沒有提及相應的 CSS 類，因為我們不需要它們來定義 JavaScript 動畫。只有當應用程序模塊加載 ngAnimate 模塊時，才會生成這些事件。現在讓我們看看如何為某些指令添加動畫。

自定義 Angular 動畫的語法

自定義 JavaScript 動畫的基本框架如下：

angular.module('coursesApp', ['ngAnimate']);

在 AngularJS 中編寫 JavaScript 動畫時，請記住以下幾點：

1. 動畫名稱以點號 (.) 開頭。
2. 每個動畫操作都接受兩個參數：
   • 一個對象，它是將應用動畫的當前 DOM 元素。如果在加載 AngularJS 之前沒有加載 jQuery，則它是 jQlite 對象；否則，它是 jQuery 對象。
   • 動畫完成後調用的回調函數。在調用 done 函數之前，指令的操作將被暫停。

我們有很多 JavaScript 庫，例如 jQuery、Greensock、Anima 等，它們簡化了編寫動畫的工作。為了簡單起見，我在本文中使用 jQuery 來創建動畫。要了解其他庫，您可以訪問其各自的網站。

為 ng-view 添加動畫

當用戶在 AngularJS 應用程序的視圖之間切換時，將對 ng-view 指令應用動畫。如上表所示，我們可以在視圖進入或離開時添加動畫。不必處理這兩種情況；我們可以為看起來必要的情況添加動畫。

以下動畫在視圖進入頁面時會產生一些視覺效果：

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

以上代碼會在視圖進入頁面時創建一個滑動進入效果。 done 方法作為回調傳遞。這是為了指示動畫已完成，現在框架可以繼續執行下一個操作。

請注意 animate() 方法的調用方式。我們不必將元素轉換為 jQuery 對象，因為 jQuery 庫是在加載 AngularJS 之前加載的。

現在我們需要將此動畫應用於 ng-view 指令。儘管動畫是在 JavaScript 中定義的，但按照約定，我們使用目標指令上的類來應用它。

courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});

為 ng-repeat 添加動畫

ng-repeat 是最重要的指令之一，它提供了許多選項。該指令的兩個基本操作是過濾和排序。根據執行的操作類型，指令下的項目將被添加、刪除或移動。

讓我們應用一些基本動畫，以便用戶可以看到何時發生更改。

<div class="view-slide-in" ng-view=""></div>

為 ng-hide 添加動畫

ng-hide 指令會在目標元素上添加或刪除 ng-hide CSS 類。要應用動畫，我們需要處理添加和刪除 CSS 類的情況。類名將傳遞給動畫處理程序類。這讓我們可以檢查類並採取適當的操作。

以下是動畫代碼示例，該代碼會在激活或停用 ng-hide 指令時淡出或淡入元素：

courseAppAnimations.animation('.repeat-animation', function () {
  return {
    enter : function(element, done) {
      console.log("entering...");
      var width = element.width();
      element.css({
        position: 'relative',
        left: -10,
        opacity: 0
      });
      element.animate({
        left: 0,
        opacity: 1
      }, done);
    },
    leave : function(element, done) {
      element.css({
        position: 'relative',
        left: 0,
        opacity: 1
      });
      element.animate({
        left: -10,
        opacity: 0
      }, done);
    },
    move : function(element, done) {
      element.css({
        left: "2px",
        opacity: 0.5
      });
      element.animate({
        left: "0px",
        opacity: 1
      }, done);
    }
  };
});

為自定義指令添加動畫

要為自定義指令添加動畫，我們需要使用 $animate 服務。儘管 $animate 是 AngularJS 核心框架的一部分，但應加載 ngAnimate 以充分利用該服務。

使用與上一篇文章相同的演示，我們將顯示一個包含課程列表的頁面。我們創建一個指令，在一個框中顯示課程的詳細信息，並且單擊“查看統計信息”鏈接後，框的內容將發生更改。讓我們添加一個動畫，以便用戶可以看到過渡。

過渡發生時，我們將添加一個 CSS 類，動畫完成後，我們將刪除該類。以下是此指令的代碼：

angular.module('coursesApp', ['ngAnimate']);

如您所見，我們在動畫完成後執行操作。在瀏覽器開發者工具中檢查指令元素時，我們將看到類 switching-active 和 switching-add 非常快速地添加和刪除。我們可以定義 CSS 過渡或自定義 JavaScript 動畫來查看正在發生的動畫。以下是可與上述指令一起使用的示例 CSS 過渡（為簡潔起見，省略了供應商前綴）：

angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});

或者，以下是可以用於同一指令的 jQuery 動畫：

courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});

可以將這些動畫中的一個應用於自定義指令，就像我們將動畫應用於內置指令一樣。

<div class="view-slide-in" ng-view=""></div>

您可以在演示頁面上查看所有上述動畫的實際效果。

結論

如果使用得當且具有功能性，動畫可以使應用程序更生動。正如我們所看到的，AngularJS 豐富地支持 CSS 和 JavaScript 動畫。您可以根據團隊的情況選擇其中一種。

但是，大量使用動畫可能會導致應用程序變慢，並且應用程序對最終用戶來說似乎設計過度。因此，必須謹慎且優化地使用此武器。

關於 AngularJS 應用程序中 JavaScript 動畫的常見問題解答 (FAQ)

如何在 AngularJS 中創建基本動畫？

在 AngularJS 中創建基本動畫涉及幾個步驟。首先，您需要在項目中包含 AngularJS 動畫庫。這可以通過在 HTML 文件中添加對“angular-animate.js”文件的引用來實現。接下來，您需要將“ngAnimate”模塊注入到 AngularJS 應用程序中。這可以通過在應用程序模塊中添加“ngAnimate”作為依賴項來實現。完成此操作後，您可以使用 CSS 類和 AngularJS 指令創建動畫。例如，您可以使用“ng-enter”和“ng-leave”類在元素進入或離開 DOM 時為其添加動畫。

AngularJS 動畫的關鍵組件是什麼？

AngularJS 動畫主要由兩個關鍵組件組成：CSS 和 JavaScript。 CSS 用於定義動畫的樣式和過渡，而 JavaScript 用於控制動畫的時間和順序。在 AngularJS 中，動畫是通過將 CSS 類與特定的 AngularJS 指令（例如“ng-repeat”、“ng-switch”和“ng-view”）相關聯來創建的。這些指令會在適當的時間自動添加和刪除關聯的 CSS 類，使您可以使用最少的 JavaScript 代碼創建複雜的動畫。

如何控制 AngularJS 中動畫的時間？

可以使用 CSS 過渡和動畫來控制 AngularJS 中動畫的時間。通過在 CSS 類中指定“transition-duration”或“animation-duration”屬性，您可以控制動畫持續的時間。此外，您可以使用“transition-delay”或“animation-delay”屬性來控制動畫的開始時間。這些屬性可以用秒 (s) 或毫秒 (ms) 指定。

我可以使用 JavaScript 在 AngularJS 中創建動畫嗎？

是的，您可以使用 JavaScript 在 AngularJS 中創建動畫。雖然 CSS 通常用於簡單的動畫，但 JavaScript 可用於更複雜的動畫，這些動畫需要對動畫的時間和順序進行精確控制。在 AngularJS 中，您可以使用“$animate”服務以編程方式控制動畫。此服務提供用於添加、刪除和查詢 CSS 類的方法，使您可以使用 JavaScript 創建複雜的動畫。

如何在 AngularJS 中動畫化元素在進入或離開 DOM 時？

在 AngularJS 中，您可以使用“ng-enter”和“ng-leave”類在元素進入或離開 DOM 時為其添加動畫。當元素進入或離開 DOM 時，AngularJS 會自動添加和刪除這些類。通過為這些類定義 CSS 過渡或動畫，您可以創建在元素進入或離開 DOM 時觸發的動畫。

如何將 AngularJS 動畫與“ng-repeat”一起使用？

您可以通過將 CSS 類與“ng-repeat”指令相關聯來將 AngularJS 動畫與“ng-repeat”一起使用。當項目添加到或從“ng-repeat”列表中刪除時，AngularJS 會自動添加和刪除關聯的 CSS 類，從而觸發相應的動畫。例如，您可以使用“ng-enter”和“ng-leave”類在項目添加到或從列表中刪除時為其添加動畫。

我可以將 AngularJS 動畫與“ng-switch”一起使用嗎？

是的，您可以將 AngularJS 動畫與“ng-switch”一起使用。與“ng-repeat”類似，您可以將 CSS 類與“ng-switch”指令相關聯以創建動畫。 “ng-switch”條件更改時，AngularJS 會自動添加和刪除關聯的 CSS 類，從而觸發相應的動畫。

如何將 AngularJS 動畫與“ng-view”一起使用？

您可以通過將 CSS 類與“ng-view”指令相關聯來將 AngularJS 動畫與“ng-view”一起使用。視圖更改時，AngularJS 會自動添加和刪除關聯的 CSS 類，從而觸發相應的動畫。這可用於在 AngularJS 應用程序中創建頁面過渡動畫。

我可以將 AngularJS 動畫與自定義指令一起使用嗎？

是的，您可以將 AngularJS 動畫與自定義指令一起使用。通過在指令的鏈接函數中使用“$animate”服務，您可以以編程方式添加、刪除和查詢 CSS 類，從而使用 JavaScript 創建複雜的動畫。

如何調試 AngularJS 動畫？

可以使用瀏覽器開發者工具調試 AngularJS 動畫。通過檢查 DOM 中的動畫元素，您可以查看 AngularJS 正在添加和刪除哪些 CSS 類。此外，您可以使用“$animate”服務的“enabled”方法來啟用或禁用動畫，這對於調試非常有用。

以上是Angularjs應用程序中的JavaScript動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！