這篇文章主要介紹了使用ngView配合AngularJS應用實現動畫效果的方法,AngularJS是十分熱門的JavaScript庫,需要的朋友可以參考下
AngularJS 提供了一個很棒的方式來創建單頁app。正是由於這個原因，使得我們的站點看起來更像是一個原生的手機程序。為了使它看起來更像是原生的程序，我們可以使用 ngAnimate module 為它添加過渡和動畫效果。
這個模塊可以使我們創建漂亮的程序。今天，我們將要看一下如何為 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 來定義樣式。
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!-- index.html --> <!DOCTYPE html> <html> <head> <!-- CSS --> <!-- load bootstrap (bootswatch version) --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <!-- JS --> <!-- load angular, ngRoute, ngAnimate --> <script src="http://code.angularjs.org/1.2.13/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script> <script src="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 class="page {{ pageClass }}" ng-view></div> </body> </html>
以上就是我們非常簡單的HTML文件。加載我們需要的資源，定義我們的Angular app，並且為我們注入的視圖添加ng-view類名。
讓我們看一下我們所需要的其他的一些文件：
我們的 Angular 程序 app.js
現在，我們需要將會創建一個帶路由的Angular程序，以便我們可以在不刷新頁面的情況下修改我們的頁面。
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 // 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('/', { 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'; });現在，我們創建了我們的程序、路由以及控制器。
每一個控制器都有一個它自己的pageClass變量。改變了的值會被添加到index.html文件中的ng-view中，這樣我們的每一個頁面都有了不同的類名。通過這些不同的類名，我們可以為不同的頁面添加不同的動畫效果。
視圖 page-home.html, page-about.html, page-contact.html
這些應該盡量保持清晰並且直接明了。我們只需要為每個頁面准備一些文字以及鏈到其他頁面的鏈接地址。
現在，我們擁有了我們的頁面，通過使用Angular的路由功能可以將這些頁面注入到我們的主index.html文件中。
現在，所有的乏味的工作已經完成。我們的程序應該可以正常工作，並且可以很好的修改頁面。接下來，讓我們進入下一步，為頁面添加動畫效果！
為App添加動畫效果 style.css
我們將使用CSS來添加所有的動畫效果。這種方法很棒，因為我們所要做的事就是添加ngAnimate，並且不用修改我們的代碼就可以添加CSS動畫效果。
ngAnimate為我們的ng-view添加的兩個類分別是.ng-enter和.ng-leave。你可以想象一些他們各自的作用。
基礎樣式
為了使我們的程序看起來不那麼乏味，我們將會添加一些基礎的樣式。
通過以上的代碼，我們為3個頁面添加了基礎的樣式。當我們點擊程序的時候，我們可以看到它們應用了不同的顏色和間距。
CSS 動畫
讓我們定義我們的動畫效果，之後我們將會了解一下當頁面進入或離開的時候我們怎麼才能為不同的頁面應用不用的動畫效果。
Vendor Prefixes: 我們將會使用默認的CSS屬性，不帶任何前綴的。完整的代碼會包含所有的前綴。
我們定義了6個不同的動畫效果。每一個頁面都會有他們各自的ng-enter 和 ng-leave 的動畫效果。
結合以上我們所定義的動畫效果，我們將會把它們應用到我們的頁面上。
進入和離開動畫效果
我們只需要將這些動畫效果應用給.ng-enter 或 .ng-leave就可以為我們的頁面添加不用的動畫效果。
現在，我們的程序就會有像上面那樣的動畫效果了。當離開的時候，頁面會向左滑出，當進入的時候會放大。我們還添加了z-index屬性，以便離開的頁面會處於進入的頁面的上層。
讓我們看一下如何為具體的頁面創建動畫。
具體頁面的動畫效果
我們為不同的頁面創建了各自的Angular 控制器。在這些控制器裡面，我們添加了一個pageClass並且將它添加到我們的<div ng-view>中。我們將會使用這些類名來引出具體的頁面。
不像上面的.ng-enter 和 .ng-leave那樣，我們使它們更加具體化。
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ... .ng-enter { z-index: 8888; } .ng-leave { z-index: 9999; } /* page specific animations ------------------------ */ /* home -------------------------- */ .page-home.ng-enter { animation: scaleUp 0.5s both ease-in; } .page-home.ng-leave { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; } /* about ------------------------ */ .page-about.ng-enter { animation:slideInRight 0.5s both ease-in; } .page-about.ng-leave { animation:slideOutLeft 0.5s both ease-in; } /* contact ---------------------- */ .page-contact.ng-leave { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; } .page-contact.ng-enter { animation:slideInUp 0.5s both ease-in; } ...
現在，每一個頁面都有它各自唯一的進入和離開的動畫效果。
總結
為我們的Angular程序添加動畫效果是相當容易的。你所需要做的就是加載ngAnimate並創建你的CSS動畫效果。真誠的希望這篇文章可以幫助你了解一些使用ng-view時的一些比較酷的動畫效果。
View Code : http://plnkr.co/edit/uW4v9T?p=info