用ng-view创建单页APP
我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。
我们将会使用：
使用 ngRoute 来为我们的页面路由
使用 ngAnimate 来为页面创建动画效果
对页面使用 CSS Animations
当我们离开或进入试图时，我们的每一个页面会有不同的动画效果
让我们看一下ngAnimate是如何工作的。ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。
我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。
ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass
需要的文件列表：
- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html index.html,
加载我们需要的资源，定义我们的Angular app，并且为我们注入的视图添加ng-view类名。
<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 type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.13/angular.min.js"></script>
<script src="http://lib.baomitu.com/angular.js/1.2.13/angular-route.min.js"></script>
<script src="http://lib.baomitu.com/angular.js/1.2.13/angular-animate.min.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>
app.js
现在，我们需要将会创建一个带路由的Angular程序，以便我们可以在不刷新页面的情况下修改我们的页面。
// 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';
});
page-home.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
<!-- 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
<!-- 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>
style.css
/* 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:;
padding-top: 200px;
position: absolute;
text-align: center;
top:;
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;
}
/* ANIMATIONS
============================================================================= */
.ng-enter {
animation: scaleUp 0.5s both ease-in;
z-index:;
}
.ng-leave {
animation: slideOutLeft 0.5s both ease-in;
z-index:;
}
.ng-enter {
z-index:;
}
.ng-leave {
z-index:;
}
/* 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;
}
/* 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:;
}
}
/* 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);
}
}
我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。
ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。
我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。
用ng-view创建单页APP的更多相关文章
- 七天学会ASP.NET MVC（七）——创建单页应用
系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...
- 七天学会ASP.NET MVC（七）——创建单页应用 【转】
http://www.cnblogs.com/powertoolsteam/p/MVC_Seven.html 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学 ...
- Nodejs之MEAN栈开发（六）---- 用Angular创建单页应用(上)
在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...
- 创建单页web app， 如何在chrome中隐藏工具栏 地址栏 标签栏？
问题描述: 为使用更大的屏幕空间,在访问web应用的使用,如何隐藏地址栏.工具栏? 解决办法: 1. chrome的application mode 选项--->更多工具---->添加到桌 ...
- Nodejs之MEAN栈开发（七）---- 用Angular创建单页应用(下)
上一节我们走通了基本的SPA基础结构,这一节会更彻底的将后端的视图.路由.控制器全部移到前端.篇幅比较长,主要分页面改造.使用AngularUI两大部分以及一些优化路由.使用Angular的其他指令的 ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- 【ASP.NET MVC 5】第27章 Web API与单页应用程序
注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家 ...
- 高效开发 Web 单页应用解决方案
于 2017 年初,有在 Github 建立并维护一个项目:Vue Boilerplate Template,欲成就一款开箱即用 Vue + Webpack 的脚手架模版:其目标与宗旨是:根据以往经验 ...
- Singal Page App：使用Knockout和RequireJS创建高度模块化的单页应用引擎
Singal Page App 开篇扯淡 距离上一篇文章已经有好几个月,也不是没有时间记录点东西,主要是换了新的工作,在一家外资工作,目前的工作内容大多都是前端开发,新接触的东西因为时间原因,大多还不 ...
随机推荐
- Spring Boot 整合 Mybatis 实现 Druid 多数据源详解
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “清醒时做事,糊涂时跑步,大怒时睡觉,独处时思考” 本文提纲一.多数据源的应用场景二.运行 sp ...
- Hibernate的映射文件中基于主键的双向1对1的关联
1.Hibernate中采用基于主键的映射策略是,有一端(任意一端)的主键生成策略要是foreign,根据对方的主键来生成自己的主键,它的实体不能拥有自己的主键生成策略,如我的配置文件: <?x ...
- CoreCLR源码探索(四) GC内存收集器的内部实现 分析篇
在这篇中我将讲述GC Collector内部的实现, 这是CoreCLR中除了JIT以外最复杂部分,下面一些概念目前尚未有公开的文档和书籍讲到. 为了分析这部分我花了一个多月的时间,期间也多次向Cor ...
- spring+mybatis之声明式事务管理初识(小实例)
前几篇的文章都只是初步学习spring和mybatis框架,所写的实例也都非常简单,所进行的数据访问控制也都很简单,没有加入事务管理.这篇文章将初步接触事务管理. 1.事务管理 理解事务管理之前,先通 ...
- openfire当中的Custom Database Integration Guide的配置
openfire官网配置的链接为:Custom Database Integration Guide 按照上面的步骤一步步配置在xml当中,发现始终不起作用,最后在stackoverflow找到的链接 ...
- 2.4G无线收发模块/射频RFM75调试总结/RF知识整理
射频RFM75通信是收发双方都需要编程的器件,收发双方的通道频率,空中传输速率设置一致,调试时必须先调通一块再调另一块,否则出现问题了就不知道是发送端有问题还是接收端有问题.调试必须理清思路.正确的方 ...
- 维护Study
##老师发了一个study来让我们纠错维护,整个软件是日程管理系统,分为欢迎界面,登录 注册界面,提醒界面添加日程界面,还有个人中心等.一些主要代码老师让我们把缺失部分去维护.首先我们读一下主要代码# ...
- OC--Runtime知识点整理
1.Runtime简介 因为Objc是一门动态语言,所以它总是想办法把一些决定工作从编译连接推迟到运行时.也就是说只有编译器是不够的,还需要一个运行时系统 (runtime system) 来执行编译 ...
- Angular2入门-数据绑定
▓▓▓▓▓▓ 大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式 组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑 ...
- Spring事务管理的实现方式：编程式事务与声明式事务
1.上篇文章讲解了Spring事务的传播级别与隔离级别,以及分布式事务的简单配置,点击回看上篇文章 2.编程式事务:编码方式实现事务管理(代码演示为JDBC事务管理) Spring实现编程式事务,依赖 ...