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, leaveng-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中文网其他相关文章！