AngularJS 提供了一个很棒的方式来创建单页app。正是由于这个原因，使得我们的站点看起来更像是一个原生的手机程序。为了使它看起来更像是原生的程序，我们可以使用 ngAnimate module 为它添加过渡和动画效果。
这个模块可以使我们创建漂亮的程序。今天，我们将要看一下如何为 ng-view 添加动画效果。
我们要构建什么
我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。
我们将会使用：
使用 ngRoute 来为我们的页面路由
使用 ngAnimate 来为页面创建动画效果
对页面使用 CSS Animations
当我们离开或进入试图时，我们的每一个页面会有不同的动画效果
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
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html
让我们从 index.html 开始，我们将会加载 AngularJS, ngRoute 以及 ngAnimate。对了，不要忘了使用Bootstrap 来定义样式。
<!-- index.html --> <!DOCTYPE html> <html> <head> <!-- CSS --> <!-- load bootstrap (bootswatch version) --> <link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css"> <link href="https://www.jb51.net/style.css"> <!-- JS --> <!-- load angular, ngRoute, ngAnimate --> <script src="https://code.angularjs.org/1.2.13/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script> <script src="https://www.jb51.net/article/app.js"></script> </head> <!-- apply our angular app --> <body ng-app="animateApp"> <!-- inject our views using ng-view --> <!-- each angular controller applies a different class here --> <div ng-view></div> </body> </html>
以上就是我们非常简单的HTML文件。加载我们需要的资源，定义我们的Angular app，并且为我们注入的视图添加ng-view类名。
让我们看一下我们所需要的其他的一些文件：
- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html
我们的 Angular 程序 app.js
现在，我们需要将会创建一个带路由的Angular程序，以便我们可以在不刷新页面的情况下修改我们的页面。
// app.js // define our application and pull in ngRoute and ngAnimate var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']); // ROUTING =============================================== // set our routing for this application // each route will pull in a different controller animateApp.config(function($routeProvider) { $routeProvider // home page .when('https://www.jb51.net/', { templateUrl: 'page-home.html', controller: 'mainController' }) // about page .when('/about', { templateUrl: 'page-about.html', controller: 'aboutController' }) // contact page .when('/contact', { templateUrl: 'page-contact.html', controller: 'contactController' }); }); // CONTROLLERS ============================================ // home page controller animateApp.controller('mainController', function($scope) { $scope.pageClass = 'page-home'; }); // about page controller animateApp.controller('aboutController', function($scope) { $scope.pageClass = 'page-about'; }); // contact page controller animateApp.controller('contactController', function($scope) { $scope.pageClass = 'page-contact'; });
现在，我们创建了我们的程序、路由以及控制器。