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

151 阅读 0 评论 100 点赞

我是靠谱客的博主大气万宝路，最近开发中收集的这篇文章主要介绍使用ngView配合AngularJS应用实现动画效果的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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 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类名。

让我们看一下我们所需要的其他的一些文件：

- 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('/', {
      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

这些应该尽量保持清晰并且直接明了。我们只需要为每个页面准备一些文字以及链到其他页面的链接地址。

<!-- 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>

现在，我们拥有了我们的页面，通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。

现在，所有的乏味的工作已经完成。我们的程序应该可以正常工作，并且可以很好的修改页面。接下来，让我们进入下一步，为页面添加动画效果！

为App添加动画效果 style.css

我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。

ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。
基础样式

为了使我们的程序看起来不那么乏味，我们将会添加一些基础的样式。

/* 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; }

通过以上的代码，我们为3个页面添加了基础的样式。当我们点击程序的时候，我们可以看到它们应用了不同的颜色和间距。

CSS 动画

让我们定义我们的动画效果，之后我们将会了解一下当页面进入或离开的时候我们怎么才能为不同的页面应用不用的动画效果。

Vendor Prefixes: 我们将会使用默认的CSS属性，不带任何前缀的。完整的代码会包含所有的前缀。

我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。

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

结合以上我们所定义的动画效果，我们将会把它们应用到我们的页面上。
进入和离开动画效果

我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。

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

现在，我们的程序就会有像上面那样的动画效果了。当离开的时候，页面会向左滑出，当进入的时候会放大。我们还添加了z-index属性，以便离开的页面会处于进入的页面的上层。

让我们看一下如何为具体的页面创建动画。

具体页面的动画效果

我们为不同的页面创建了各自的Angular 控制器。在这些控制器里面，我们添加了一个pageClass并且将它添加到我们的<div ng-view>中。我们将会使用这些类名来引出具体的页面。

不像上面的.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; }
 
...

现在，每一个页面都有它各自唯一的进入和离开的动画效果。
总结

为我们的Angular程序添加动画效果是相当容易的。你所需要做的就是加载ngAnimate并创建你的CSS动画效果。真诚的希望这篇文章可以帮助你了解一些使用ng-view时的一些比较酷的动画效果。

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