如何使用ngAnimate在AngularJS中创建动画

如果使用得当，动画可以使 Web 应用程序使用起来很有趣。现代浏览器只需使用css就能够为webp时代的不同元素设置动画。如果您在其中一个项目中使用angularJS  ，您还可以使用ngAnimate模块以 Angular 的方式为其添加动画。

ngAnimate 模块允许您将 CSS 以及基于javascript的动画添加到您的项目中。基于 CSS 的动画包括关键帧和过渡。基于 JavaScript 的动画需要使用module.animation(). 在本教程中，您将学习如何将 CSS 动画添加到内置的动画感知 AngularJS 指令中，以使您的应用程序更具吸引力。

基础知识

添加动画需要做的第一件事是在项目中包含angular-animate.js。完成后，您可以将 ngAnimate 模块作为依赖项包含在您的应用程序中，以开始为不同的元素设置动画。 

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

以下是不同动画感知指令的列表以及可用于为它们设置动画的动画事件：

• ng-repeat可以检测enter、leave和move事件。

• ng-view, ng-include,ng-switch并且ng-if可以检测进入和离开事件。
  

• ng-show，ng-hide并且ng-class可以检测添加和删除事件。

• ng-message还可以检测进入和离开事件。

您应该记住，这些动画钩子默认情况下是不启用的；它们只有在您将 ngAnimate 模块添加到您的应用程序后才会激活。

使用 CSS3 过渡动画 ng-if

AngularJS 中的ng-if指令用于根据给定表达式的值从dom中添加或删除元素。当表达式的计算结果为 时false，该元素将从 DOM 中删除。当表达式的计算结果为 时true，该元素的克隆将重新插入到 DOM 中。这种元素的添加和删除是瞬时的。但是，您可以使用 ngAnimate 模块为正在删除或重新创建的元素设置动画。

如果元素被添加到 DOM，您可以使用 ng-enter和 ng-enter-active类来为它们设置动画。转换代码以及开始动画状态被添加到ng-enter类中。最终的动画状态被添加到ng-enter-active类中。这是通过设置高度动画来显示一些红色条的代码。

.red-bar.ng-enter {
  transition:all ease-in 0.25s;
  height: 0px;
}

.red-bar.ng-enter.ng-enter-active {
  height: 30px;
}

ng-leave同样，您也可以使用和类应用动画来隐藏条形图ng-leave-active。我省略了删除红条的动画，以便您可以清楚地看到动画和非动画状态之间的区别。

See the Pen  AngularJS - Basic Animation by Monty (@Shokeen)  on CodePen.

使用 CSS3 过渡动画 ng-view

当用户在不同视图之间切换时，AngularJS 中的ng-view指令被用作重新加载页面的一部分的容器。 

就像使用 添加和删除元素一样ng-if，这个过程也很快发生。如果你想动画不同元素进入和离开视图，你可以使用相同的 old ng-enter、ng-enter-active、ng-leave和 ng-leave-activeclasses。 

除了这四个类之外，还有一个ng-animate类。在动画的过程中，这个类也被添加到所有需要动画的元素中。您可以使用它来提供在动画过程中需要适用的所有 CSS 规则。这是一个例子：

.planet-view.ng-animate {
  transition: all ease 0.4s;  position: absolute;
}

.planet-view.ng-enter {
  top: 200px;
  opacity: 0;
}

.planet-view.ng-leave, 
.planet-view.ng-enter.ng-enter-active {
  top: 0;
  opacity: 1;
}

.planet-view.ng-leave.ng-leave-active {
  top: -200px;
  opacity: 0;
}

正如您在上面的代码中看到的，所有属性都应用了 0.4 秒的过渡持续时间。当特定行星的信息进入视图时，它的不透明度为 0，top位置设置为 200px。同时，即将离开视图的元素的不透明度为 1。 

在过渡结束时，进入的元素到达视图的顶部位置并变得完全不透明。类似地，离开的元素动画到视图上方 200px 的位置并逐渐消失。这给了我们一个很好的效果，信息似乎从页面底部淡入并在页面顶部淡出。 

在下面的ng-view演示中，尝试单击不同行星的名称以查看实际的enter动画leave。

有关类地行星大气成分的信息取自此页。

See the Pen  AngularJS ng-view Animation by Monty (@Shokeen)  on CodePen.

使用关键帧动画进行重复动画

AngularJS 中的ng-repeat指令用于为给定集合中的每个项目实例化一次模板。当您尝试从集合中排序、过滤、添加或删除项目时，将使用此指令。可以使用 触发三个动画事件ng-repeat。

• enter：每当您向列表中添加新项目或应用过滤器后显示列表中的项目时，都会触发此事件。

• leave：每当您从列表中删除项目或过滤掉列表中的项目时都会触发此事件。

• move：当过滤掉相邻项目并且需要重新排序相关项目时触发此事件。

在最后两节中，您使用了 CSS 过渡来为不同的元素设置动画。在本节中，您将学习如何使用关键帧动画制作不同元素的动画。我将提供过渡和关键帧动画的代码，以便您可以看到两者之间的区别。 

这是动画项目的转换代码：

.task-item.ng-enter,
.task-item.ng-leave {
  transition:all linear 0.25s;
}

.task-item.ng-leave {
  top: 0;
  opacity: 1;
}

.task-item.ng-leave.ng-leave-active {
  top: 200px;
  opacity: 0;
}

.task-item.ng-enter{
  opacity:0;
  top: -500px;
}

.task-item.ng-enter.ng-enter-active {
  opacity:1;
  top: 0px;
}

如您所见，这段代码与我们迄今为止一直使用的转换代码非常相似。起始状态在ng-enter和中定义ng-leave。结束状态在ng-enter-active和中定义ng-leave-active。 

以下代码使用关键帧动画重新创建相同的效果。

@keyframes added {
  from {
    opacity: 0;
    top: -500px;
  }
  to {
    opacity: 1;
    top: 0px;
  }
}

@keyframes deleted {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 200px;
    opacity: 0;
  }
}

.task-item.ng-enter {
  animation: 0.25s added;
}

.task-item.ng-leave {
  animation: 0.25s deleted;
}

这一次，我们使用 CSSanimation属性来添加动画。实际的动画是使用定义的@keyframes。不同项目的初始和最终状态已在关键帧本身内定义。请注意，我们不必再使用ng-enter-activeandng-leave-active类了。使用关键帧的一个好处是现在动画可以比简单的过渡复杂得多。

尝试在以下演示中添加和删除一些任务以查看动画效果。

See the Pen  AngularJS ng-repeat Animation by Monty (@Shokeen)  on CodePen.

将 ngAnimate 与 ngMessage 一起使用

Envato Tuts+ 还发布了关于 使用 ngMessages 验证表单的教程。在该教程的最后一节中，您学习了如何仅在用户实际触摸输入字段后才显示错误消息。该教程中的所有错误消息都会立即出现和消失。 

如果您想添加一个微妙的动画来显示或隐藏错误消息，您可以使用 ngAnimate 模块轻松完成。如本教程开头ng-message所述，可以检测进入和离开事件。这意味着您可以使用ng-enter和ng-enter-active类来指定当前显示给用户的错误消息的初始和最终状态。同样，您可以使用ng-leave和ng-leave-active类来指定对用户隐藏的错误消息的初始和最终状态。

这是更改错误消息的不透明度属性的示例。

.error-msg.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}
.error-msg.ng-enter.ng-enter-active {
  opacity: 1;
}

我error-msg为所有错误消息添加了一个类，您可以添加自己的类并相应地更新代码。在这种情况下，我没有应用任何已失效且不应再向用户显示的错误消息动画。这意味着它们将立即消失。这是演示如何一起使用 ngMessages 和 ngAnimate 的演示。

See the Pen  AngularJS ngMessages -  Animation using ngAnimation by Monty (@Shokeen)  on CodePen.

结论

本教程教您如何使用 ngAnimate 模块向 AngularJS Web 应用程序添加动画。您还学习了如何根据触发事件将不同的动画应用于元素。最后一节介绍了如何将 ngAnimate 模块与其他模块（如 ngMessages）一起使用，为错误消息添加漂亮的动画。 

使用动画时必须记住的一件事是不要过度使用它们。过多的动画会分散用户对应用程序主要功能的注意力。仅当您认为动画实际上可以增强用户体验时才使用动画。