向AngularJS应用程序添加CSS动画

AngularJS用于在网络上构建丰富的数据绑定应用程序。将动画添加到这些应用程序中，就像拥有自己喜欢的披萨配浇头一样。动画不仅可以增加UI的美感，还可以使用户更加友好。应用中的小动画可能会将其丰富程度提升到其他情况下很难实现的水平。

如今，借助网络的强大功能，有多种创建动画的方法。直到最近，动画只能通过JavaScript进行。但是，既然我们的CSS3受到所有主要浏览器的良好支持，我们就可以仅使用CSS对网站进行动画处理。

AngularJS 1.1.5 beta版中支持动画。在AngularJS 1.2中发布了该功能的稳定版本之前，它进行了许多更改。可以很容易地添加或删除Angular应用程序中的动画支持。该库为基于CSS和基于JavaScript的动画提供了很好的支持。尽管可以用JavaScript编写动画，但建议使用CSS动画。这是因为浏览器对CSS动画的处理优先级较低，并且当线程执行某些重要操作时，它们不会阻塞处理线程。

在本文中，我们将看到如何使用CSS动画使AngularJS内置指令的行为具有吸引力。遍历CSS支持的动画功能不在本文讨论范围之内。您可以参考SitePoint上的CSS频道以了解更多信息。

入门

要使用动画，我们需要包括angular-animate.js库，并将ngAnimate模块作为依赖项添加到模块中，如下所示。

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

该库在指定事件的以下指令中添加了动画支持：

指令	大事记
ng-view ng-include ng-开关 ng-if	输入离开
ng-repeat	输入离开移动
ng-show ng-hide ng级	加去掉

指令状态发生任何更改时，将自动生成这些事件。要记住的重要一点是，仅当将ngAnimate模块作为依赖项传递到应用程序模块中时，才会生成这些事件。触发这些事件后，它们会在应用的元素上添加CSS类。上表中提到了CSS类的对应名称。如您所见，在事件发生时以及事件发生后，我们都可以自由定义行为。

动画`ng-view`

当用户从一个视图导航到另一个视图时，路由将在客户端解析，并且页面的一部分会加载新内容。这真的发生得很快，有时用户可能会觉得视图中的更改过于自然。此步骤中的动画将使过渡更加平滑。

参考上表，我们看到ng-view在视图改变时引发两个事件。更改视图时，请应用以下样式。

.view-slide-in.ng-enter {transition: all 1s ease;-webkit-transition:all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;opacity:0.5;position:relative;opacity:0;top:10px;left:20px;
}

上面的CSS在所应用的元素上应用了缓动过渡，过渡的持续时间为1秒。但是，仅上面的样式没有任何作用，因为我们没有说在过渡期间要更改元素的哪个属性。让我们操作一些CSS属性的值：

.view-slide-in.ng-enter {opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {top:0;left:0;opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active{top:5px;left:5px;opacity:1;
}
.view-slide-in.ng-leave{top:0;left:0;opacity:0;
}

现在我们要做的就是在ng-view指令上应用view-fade类。

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

现在，当您从一个视图导航到另一个视图时，将能够看到幻灯片效果。您可以应用任何过渡，甚至可以定义自己的关键帧动画。您可以在演示中使用视图过渡来获得更好的主意。

动画`ng-repeat`

在AngularJS应用程序中避免ng-repeat几乎是不可能的。我们最终使用了指令的大多数功能，例如更新模型，向集合中添加项目或从集合中删除项目，对项目应用排序和过滤。当我们执行这些操作时，指令中的项目会不断变化。

让我们对元素的不透明度应用线性过渡，以查看项的变化。

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {-webkit-transition: all linear 1s;-moz-transition: all linear 1s;-o-transition: all linear 1s;transition: all linear 1s;position:relative;left:5px;
}
.repeat-animation.ng-enter {opacity: 0;
}
.repeat-animation.ng-enter.ng-enter-active {opacity: 1;
}
.repeat-animation.ng-leave {opacity: 1;
}
.repeat-animation.ng-leave.ng-leave-active {opacity: 0;
}
.repeat-animation.ng-move {left:2px;opacity: 0.5;
}
.repeat-animation.ng-move.ng-move-active {left:0;opacity: 1;
}

现在，当在列表上执行任何操作时，我们将看到淡入和对项目的轻微抖动效果的混合。该效果是由于更改了上面创建的ng-move类中的项目的left position属性的值而引起的。将任何随机过滤和排序应用于演示中的项目列表，并观察元素的行为。

动画`ng-hide`

对ng-hide进行动画处理类似于对ng-view进行动画处理。唯一的区别是，我们需要应用ng-add和ng-remove类，而不是ng-enter和ng-leave 。让我们在ng-hide指令显示或ng-hide项目时使它们淡入或淡出。通过反转事件，可以将相同的动画应用于ng-show 。

.hide-fade.ng-hide-add, .hide-fade.ng-hide-remove {-webkit-transition:all linear 1s;-moz-transition:all linear 1s;-o-transition:all linear 1s;transition:all linear 1s;display:block!important;
}
.hide-fade.ng-hide-add.ng-hide-add-active,
.hide-fade.ng-hide-remove {opacity:0;
}
.hide-fade.ng-hide-add,
.hide-fade.ng-hide-remove.ng-hide-remove-active {opacity:1;
}

在演示中观看此动画。第一页右侧的复选框隐藏或显示了转发器中的某些项目。

结论

随着网络浏览器功能的每天都在增长，我们的客户希望我们使用这些功能的全部功能，并向他们提供出色的产品。 CSS中的动画支持是一项需求功能。与CSS相比，编写和使用动画要容易得多，而不是编写几行JavaScript代码来完成相同的事情。我希望您发现本教程对您有所帮助，并希望听到您的反馈。

From: https://www.sitepoint.com/adding-css-animations-angularjs-applications/