使用ngView配合AngularJS应用实现动画效果的方法_AngularJS

这个模块可以使我们创建漂亮的程序。今天，我们将要看一下如何为 ng-view 添加动画效果。
我们要构建什么

我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。

我们将会使用：

Extreme Animations: 我们在这里使用的动画效果就是上面提到的这些。精巧的动画效果可以为你的站点增色不少，仅仅是demo页面就足够令我们为之疯狂了。*动画效果来自于Codrops上的 A Collection of Page Transitions

它如何工作？

让我们看一下ngAnimate是如何工作的。ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。

我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。

ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass

一定要查看 ngAnimate 文档 来了解ngAnimate更多的功能。接下来，让我们在实际应用中了解一下。

开始我们的程序

以下使我们需要的文件：

让我们从 index.html 开始，我们将会加载 AngularJS, ngRoute 以及 ngAnimate。对了，不要忘了使用Bootstrap 来定义样式。