AngularJS 應用程序中的 JavaScript 動畫

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

我們可以為應用程序的一部分設置動畫以指示發生的變化。在我的上一篇文章中，我介紹了 Angular 應用程序中對 CSS 動畫的支持。在本文中，我們將了解如何利用 JavaScript 為 AngularJS 應用程序製作動畫。

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

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

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

上面的清單與上一篇相同，但沒有提到相應的 CSS 類，因為我們不需要它們來定義 JavaScript 動畫。僅當應用程序模塊加載 ngAnimate 時才會生成這些事件 模塊。現在讓我們看看如何為一些指令設置動畫。

自定義角度動畫的語法

一個自定義 JavaScript 動畫的基本骨架如下：

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

以下是在 AngularJS 中編寫 JavaScript 動畫時要記住的一些事項：

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

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

動畫ng-view

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

下面是一個在視圖進入時會產生一些視覺效果的動畫：

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);
    }
  };
});

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

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

現在我們需要將此動畫應用到 ng-view 指示。雖然動畫是在 JavaScript 中定義的，但按照慣例，我們使用目標指令上的類來應用它。

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

動畫ng-repeat

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

讓我們應用一些基本動畫，以便人們可以看到何時發生了變化。

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);
    }
  };
});

動畫ng-hide

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

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

courseAppAnimations.animation('.hide-animation', function () {
  return {
    beforeAddClass : function(element, className, done) {
      if (className === 'ng-hide') {
        element.animate({
          opacity: 0
        },500, done);
      } else {
        done();
      }
    },
    removeClass : function(element, className, done) {
      if (className === 'ng-hide') {
      element.css('opacity',0);
      element.animate({
          opacity: 1
        }, 500, done);
      } else {
        done();
      }
    }
  };
});

動畫自定義指令

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

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

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

app.directive('courseDetails', function ($animate) {
      return {
        scope: true,
        templateUrl: 'courseDetails.html',
        link: function (scope, elem, attrs) {
          scope.viewDetails = true;
          elem.find('button').bind('click', function () {
            $animate.addClass(elem, "switching", function () {
              elem.removeClass("switching");
              scope.viewDetails =! scope.viewDetails;
              scope.$apply();
        });
      });
    }
  };
});

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

.det-anim.switching {
  transition: all 1s linear;
  position: relative;
  opacity: 0.5;
  left: -20px;
}

或者，這是一個用於同一指令的 jQuery 動畫：

courseAppAnimations.animation('.js-anim', function () {
  return {
    beforeAddClass: function(element, className, done) {
      if (className === 'switching') {
        element.animate({
          opacity: 0
        },1000, function (){
          element.css({
            opacity: 1
          });
          done();
        });
      }
      else {
        done();
      }
    }
  }
});

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

<div course-details 
     class="det-anim"
     title="{{course.title}}">
</div>

您可以在演示頁面上查看所有上述動畫 .

結論

動畫，如果使用得當且功能齊全，可以為應用程序帶來活力。正如我們所見，AngularJS 對 CSS 和 JavaScript 動畫都有豐富的支持。您可以根據團隊的情況選擇其中一種。

但是使用大量動畫可能會導致應用程序變慢，並且該應用程序在最終用戶看來可能是過度設計的。所以，這把武器必須小心使用，優化使用。