核心要点
animation 方法中定义。动画名称以点号开头，每个动画操作都接受两个参数：表示将应用动画的当前 DOM 元素的对象，以及动画完成后调用的回调函数。AngularJS 是一个功能丰富的框架，用于创建单页 Web 应用程序，它提供了构建丰富且交互式应用程序所需的所有功能。Angular 的关键特性之一就是支持动画。
我们可以为应用程序的一部分添加动画，以指示正在发生的更改。在我上一篇文章中，我介绍了 Angular 应用程序中 CSS 动画的支持。在本文中，我们将了解如何利用 JavaScript 为 AngularJS 应用程序添加动画。
在 Angular 中，CSS 和 JavaScript 动画之间唯一的区别在于它们的定义方式。已定义动画的使用方式没有区别。首先，我们需要将 ngAnimate 模块加载到应用程序的根模块中。
angular.module('coursesApp', ['ngAnimate']);JavaScript 动画中要处理的动画事件也保持不变。以下是支持动画的指令列表及其针对不同操作的事件：
指令 事件
上面的列表与上一篇文章中的列表相同，但没有提及相应的 CSS 类，因为我们不需要它们来定义 JavaScript 动画。只有当应用程序模块加载 ngAnimate 模块时，才会生成这些事件。现在让我们看看如何为某些指令添加动画。
自定义 JavaScript 动画的基本框架如下：
angular.module('coursesApp', ['ngAnimate']);在 AngularJS 中编写 JavaScript 动画时，请记住以下几点：
我们有很多 JavaScript 库，例如 jQuery、Greensock、Anima 等，它们简化了编写动画的工作。为了简单起见，我在本文中使用 jQuery 来创建动画。要了解其他库，您可以访问其各自的网站。
当用户在 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 是最重要的指令之一，它提供了许多选项。该指令的两个基本操作是过滤和排序。根据执行的操作类型，指令下的项目将被添加、删除或移动。
让我们应用一些基本动画，以便用户可以看到何时发生更改。
<div class="view-slide-in" ng-view=""></div>
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 中创建基本动画涉及几个步骤。首先，您需要在项目中包含 AngularJS 动画库。这可以通过在 HTML 文件中添加对“angular-animate.js”文件的引用来实现。接下来，您需要将“ngAnimate”模块注入到 AngularJS 应用程序中。这可以通过在应用程序模块中添加“ngAnimate”作为依赖项来实现。完成此操作后，您可以使用 CSS 类和 AngularJS 指令创建动画。例如，您可以使用“ng-enter”和“ng-leave”类在元素进入或离开 DOM 时为其添加动画。
AngularJS 动画主要由两个关键组件组成：CSS 和 JavaScript。CSS 用于定义动画的样式和过渡，而 JavaScript 用于控制动画的时间和顺序。在 AngularJS 中，动画是通过将 CSS 类与特定的 AngularJS 指令（例如“ng-repeat”、“ng-switch”和“ng-view”）相关联来创建的。这些指令会在适当的时间自动添加和删除关联的 CSS 类，使您可以使用最少的 JavaScript 代码创建复杂的动画。
可以使用 CSS 过渡和动画来控制 AngularJS 中动画的时间。通过在 CSS 类中指定“transition-duration”或“animation-duration”属性，您可以控制动画持续的时间。此外，您可以使用“transition-delay”或“animation-delay”属性来控制动画的开始时间。这些属性可以用秒 (s) 或毫秒 (ms) 指定。
是的，您可以使用 JavaScript 在 AngularJS 中创建动画。虽然 CSS 通常用于简单的动画，但 JavaScript 可用于更复杂的动画，这些动画需要对动画的时间和顺序进行精确控制。在 AngularJS 中，您可以使用“$animate”服务以编程方式控制动画。此服务提供用于添加、删除和查询 CSS 类的方法，使您可以使用 JavaScript 创建复杂的动画。
在 AngularJS 中，您可以使用“ng-enter”和“ng-leave”类在元素进入或离开 DOM 时为其添加动画。当元素进入或离开 DOM 时，AngularJS 会自动添加和删除这些类。通过为这些类定义 CSS 过渡或动画，您可以创建在元素进入或离开 DOM 时触发的动画。
您可以通过将 CSS 类与“ng-repeat”指令相关联来将 AngularJS 动画与“ng-repeat”一起使用。当项目添加到或从“ng-repeat”列表中删除时，AngularJS 会自动添加和删除关联的 CSS 类，从而触发相应的动画。例如，您可以使用“ng-enter”和“ng-leave”类在项目添加到或从列表中删除时为其添加动画。
是的，您可以将 AngularJS 动画与“ng-switch”一起使用。与“ng-repeat”类似，您可以将 CSS 类与“ng-switch”指令相关联以创建动画。“ng-switch”条件更改时，AngularJS 会自动添加和删除关联的 CSS 类，从而触发相应的动画。
您可以通过将 CSS 类与“ng-view”指令相关联来将 AngularJS 动画与“ng-view”一起使用。视图更改时，AngularJS 会自动添加和删除关联的 CSS 类，从而触发相应的动画。这可用于在 AngularJS 应用程序中创建页面过渡动画。
是的，您可以将 AngularJS 动画与自定义指令一起使用。通过在指令的链接函数中使用“$animate”服务，您可以以编程方式添加、删除和查询 CSS 类，从而使用 JavaScript 创建复杂的动画。
可以使用浏览器开发者工具调试 AngularJS 动画。通过检查 DOM 中的动画元素，您可以查看 AngularJS 正在添加和删除哪些 CSS 类。此外，您可以使用“$animate”服务的“enabled”方法来启用或禁用动画，这对于调试非常有用。
以上是Angularjs应用程序中的JavaScript动画的详细内容。更多信息请关注PHP中文网其他相关文章！
