AngularJS 提供了一個(gè)很棒的方式來(lái)創(chuàng)建單頁(yè)app。正是由于這個(gè)原因，使得我們的站點(diǎn)看起來(lái)更像是一個(gè)原生的手機(jī)程序。為了使它看起來(lái)更像是原生的程序，我們可以使用 ngAnimate module 為它添加過(guò)渡和動(dòng)畫效果。

這個(gè)模塊可以使我們創(chuàng)建漂亮的程序。今天，我們將要看一下如何為 ng-view 添加動(dòng)畫效果。
我們要構(gòu)建什么

我們假設(shè)我們有一個(gè)單頁(yè)面的程序，并且想為這個(gè)頁(yè)面添加動(dòng)畫效果。點(diǎn)擊某一個(gè)鏈接會(huì)將一個(gè)試圖滑出，同時(shí)將另一個(gè)試圖滑入。

我們將會(huì)使用：

使用 ngRoute 來(lái)為我們的頁(yè)面路由
使用 ngAnimate 來(lái)為頁(yè)面創(chuàng)建動(dòng)畫效果
對(duì)頁(yè)面使用 CSS Animations
當(dāng)我們離開或進(jìn)入試圖時(shí)，我們的每一個(gè)頁(yè)面會(huì)有不同的動(dòng)畫效果

Extreme Animations: 我們?cè)谶@里使用的動(dòng)畫效果就是上面提到的這些。精巧的動(dòng)畫效果可以為你的站點(diǎn)增色不少，僅僅是demo頁(yè)面就足夠令我們?yōu)橹偪窳恕?動(dòng)畫效果來(lái)自于Codrops上的 A Collection of Page Transitions

它如何工作？

讓我們看一下ngAnimate是如何工作的。ngAnimate 會(huì)根據(jù)是進(jìn)入還是離開視圖來(lái)為不同的Angular 指令(directive)添加和移除不同的CSS類名。例如，當(dāng)我們加載網(wǎng)站時(shí)，無(wú)論ng-view中填充了什么都會(huì)得到一個(gè).ng-enter的類名。

我們所需要做的就是給.ng-enter 類名添加CSS動(dòng)畫效果，該動(dòng)畫在進(jìn)入的時(shí)候會(huì)自動(dòng)生效。

ngAnimate 可以應(yīng)用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass

一定要查看 ngAnimate 文檔來(lái)了解ngAnimate更多的功能。接下來(lái)，讓我們?cè)趯?shí)際應(yīng)用中了解一下。

開始我們的程序

以下使我們需要的文件：

- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html

讓我們從 index.html 開始，我們將會(huì)加載 AngularJS, ngRoute 以及 ngAnimate。對(duì)了，不要忘了使用Bootstrap 來(lái)定義樣式。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
 
  <!-- CSS -->
  <!-- load bootstrap (bootswatch version) -->
  <link rel="stylesheet" >
  <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>

以上就是我們非常簡(jiǎn)單的HTML文件。加載我們需要的資源，定義我們的Angular app，并且為我們注入的視圖添加ng-view類名。

讓我們看一下我們所需要的其他的一些文件：

- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html

我們的 Angular 程序 app.js

現(xiàn)在，我們需要將會(huì)創(chuàng)建一個(gè)帶路由的Angular程序，以便我們可以在不刷新頁(yè)面的情況下修改我們的頁(yè)面。

// 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';
});

現(xiàn)在，我們創(chuàng)建了我們的程序、路由以及控制器。

每一個(gè)控制器都有一個(gè)它自己的pageClass變量。改變了的值會(huì)被添加到index.html文件中的ng-view中，這樣我們的每一個(gè)頁(yè)面都有了不同的類名。通過(guò)這些不同的類名，我們可以為不同的頁(yè)面添加不同的動(dòng)畫效果。

視圖 page-home.html, page-about.html, page-contact.html

這些應(yīng)該盡量保持清晰并且直接明了。我們只需要為每個(gè)頁(yè)面準(zhǔn)備一些文字以及鏈到其他頁(yè)面的鏈接地址。

<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>
 
<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
 
<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>
 
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
 
<!-- page-contact.html -->
<h1>Tons of Animations</h1> 
<h2>Contact</h2>
 
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

現(xiàn)在，我們擁有了我們的頁(yè)面，通過(guò)使用Angular的路由功能可以將這些頁(yè)面注入到我們的主index.html文件中。

現(xiàn)在，所有的乏味的工作已經(jīng)完成。我們的程序應(yīng)該可以正常工作，并且可以很好的修改頁(yè)面。接下來(lái)，讓我們進(jìn)入下一步，為頁(yè)面添加動(dòng)畫效果！

為App添加動(dòng)畫效果 style.css

我們將使用CSS來(lái)添加所有的動(dòng)畫效果。這種方法很棒，因?yàn)槲覀兯龅氖戮褪翘砑觧gAnimate，并且不用修改我們的代碼就可以添加CSS動(dòng)畫效果。

ngAnimate為我們的ng-view添加的兩個(gè)類分別是.ng-enter和.ng-leave。你可以想象一些他們各自的作用。
基礎(chǔ)樣式

為了使我們的程序看起來(lái)不那么乏味，我們將會(huì)添加一些基礎(chǔ)的樣式。

/* make our pages be full width and full height */
/* positioned absolutely so that the pages can overlap each other as they enter and leave */
.page    {
  bottom:0; 
  padding-top:200px;
  position:absolute; 
  text-align:center;
  top:0; 
  width:100%; 
}
 
.page h1   { font-size:60px; }
.page a   { margin-top:50px; }
 
/* PAGES (specific colors for each page)
============================================================================= */
.page-home     { background:#00D0BC; color:#00907c; }
.page-about   { background:#E59400; color:#a55400; }
.page-contact   { background:#ffa6bb; color:#9e0000; }

通過(guò)以上的代碼，我們?yōu)?個(gè)頁(yè)面添加了基礎(chǔ)的樣式。當(dāng)我們點(diǎn)擊程序的時(shí)候，我們可以看到它們應(yīng)用了不同的顏色和間距。

CSS 動(dòng)畫

讓我們定義我們的動(dòng)畫效果，之后我們將會(huì)了解一下當(dāng)頁(yè)面進(jìn)入或離開的時(shí)候我們?cè)趺床拍転椴煌捻?yè)面應(yīng)用不用的動(dòng)畫效果。

Vendor Prefixes: 我們將會(huì)使用默認(rèn)的CSS屬性，不帶任何前綴的。完整的代碼會(huì)包含所有的前綴。

我們定義了6個(gè)不同的動(dòng)畫效果。每一個(gè)頁(yè)面都會(huì)有他們各自的ng-enter 和 ng-leave 的動(dòng)畫效果。

/* style.css */
...
 
/* ANIMATIONS
============================================================================= */
 
/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
  0%     { transform: rotateZ(0deg); }
  20%   { transform: rotateZ(10deg); animation-timing-function: ease-out; }
  40%   { transform: rotateZ(17deg); }
  60%   { transform: rotateZ(16deg); }
  100%   { transform: translateY(100%) rotateZ(17deg); }
}
 
/* slide in from the bottom */
@keyframes slideOutLeft {
  to     { transform: translateX(-100%); }
}
 
/* rotate out newspaper */
@keyframes rotateOutNewspaper {
  to     { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
 
/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
  from   { opacity: 0.3; -webkit-transform: scale(0.8); }
}
 
/* slide in from the right */
@keyframes slideInRight {
  from   { transform:translateX(100%); }
  to     { transform: translateX(0); }
}
 
/* slide in from the bottom */
@keyframes slideInUp {
  from   { transform:translateY(100%); }
  to     { transform: translateY(0); }
}

結(jié)合以上我們所定義的動(dòng)畫效果，我們將會(huì)把它們應(yīng)用到我們的頁(yè)面上。
進(jìn)入和離開動(dòng)畫效果

我們只需要將這些動(dòng)畫效果應(yīng)用給.ng-enter 或 .ng-leave就可以為我們的頁(yè)面添加不用的動(dòng)畫效果。

/* style.css */
...
 
  .ng-enter       { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
  .ng-leave       { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }
 
...

現(xiàn)在，我們的程序就會(huì)有像上面那樣的動(dòng)畫效果了。當(dāng)離開的時(shí)候，頁(yè)面會(huì)向左滑出，當(dāng)進(jìn)入的時(shí)候會(huì)放大。我們還添加了z-index屬性，以便離開的頁(yè)面會(huì)處于進(jìn)入的頁(yè)面的上層。

讓我們看一下如何為具體的頁(yè)面創(chuàng)建動(dòng)畫。

具體頁(yè)面的動(dòng)畫效果

我們?yōu)椴煌捻?yè)面創(chuàng)建了各自的Angular 控制器。在這些控制器里面，我們添加了一個(gè)pageClass并且將它添加到我們的<div ng-view>中。我們將會(huì)使用這些類名來(lái)引出具體的頁(yè)面。

不像上面的.ng-enter 和 .ng-leave那樣，我們使它們更加具體化。

...
 
  .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; }
 
...

現(xiàn)在，每一個(gè)頁(yè)面都有它各自唯一的進(jìn)入和離開的動(dòng)畫效果。
總結(jié)

為我們的Angular程序添加動(dòng)畫效果是相當(dāng)容易的。你所需要做的就是加載ngAnimate并創(chuàng)建你的CSS動(dòng)畫效果。真誠(chéng)的希望這篇文章可以幫助你了解一些使用ng-view時(shí)的一些比較酷的動(dòng)畫效果。

View Code : http://plnkr.co/edit/uW4v9T?p=info

您可能感興趣的文章: