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


Posted in Javascript onJune 19, 2015

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

Javascript 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
jQuery表单验证之密码确认
May 22 jQuery
Javascript通过控制类名更改样式
May 24 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
Backbone.js的Hello World程序实例
Jun 19 #Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 #Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 #Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 #Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 #Javascript
详细解读AngularJS中的表单验证编程
Jun 19 #Javascript
JavaScript中模拟实现jsonp
Jun 19 #Javascript
You might like
PHP的FTP学习(一)
2006/10/09 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
javascript实现微信分享
2014/12/23 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python函数与方法的区别总结
2019/06/23 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
市场开发与营销专业求职信
2013/12/31 职场文书
考试没考好检讨书
2014/01/31 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
答谢词范文
2015/01/05 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS