用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: 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;
}/* ANIMATIONS
============================================================================= */.ng-enter {animation: scaleUp 0.5s both ease-in;z-index: 8888;
}.ng-leave {animation: slideOutLeft 0.5s both ease-in;z-index: 9999;
}.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;
}/* 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);}
}

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

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

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

转载于:https://www.cnblogs.com/xf110/p/6747211.html

用ng-view创建单页APP相关推荐

razor页面跳转_如何在Blazor中使用Razor页面创建单页应用程序
razor页面跳转 In this article, we are going to create a Single Page Application (SPA) using Razor pages ...
七天学会ASP.NET MVC（七）——创建单页应用
目录引言最后一篇学什么实验32-整理项目组织结构关于实验32 实验33--创建单页应用--第一部分-安装什么是Areas? 关于实验33 实验34--创建单页应用--第二部分-显示Emplo ...
使用vite创建单页应用
使用vite创建单页应用学习路径 vite介绍创建 vite 的项目梳理项目的结构 vite 项目的运行流程 vite介绍 ·vite·是vue 官方提供另外一种快速创建工程化的 SPA 项目的 ...
Excel数据透视表经典教程八《创建单页/自定义字段透视表》
前言: 一.单页字段透视表:当对多个表格进行数据透视分析时,不能直接点击插入数据透视表操作.因此,需要创建单页或者自定义字段透视表. 二.自定义字段透视表:由于上述创建的单页字段透视表,对于不同的表格 ...
揭秘喜马拉雅黑科技——网页播放器(创建自己的单页应用)
某天上班,偶然打开网页版的喜马拉雅,随手点了首推荐音频...于是伴随着动词大词,动词大词,继续逛着它的首页. 一个不小心,又点进了老郭的相声,哎,还是木有更新,不过老段子也可以再听听,正当老夫要点播的 ...
如何在Joomla中创建一个漂亮的单页网站
我们都知道一个好的网站对于建立企业信誉的重要性.但是,在拥有统一的单页网站和多页网站的选项之间进行选择可能会很棘手.特别是如果您是 Joomla 和 Web 开发的新手. 随着移动和社交媒体用户的增加 ...
带有Upida/Jeneva的ASP.NET MVC单页应用程序（前端/AngularJS）
目录介绍背景基本结构 JS控制器 HTML视图查看容器结论参考下载源3.4 MB 在Codeplex上下载最新版本和更多示例参见工作示例介绍在上一篇文章中,我演示了如何使用WebA ...
即时低码数据库Web应用-ASP.NET Core 3.1单页应用（SPA）
目录介绍网格记录在编辑/添加上的持久性用于创建单页应用程序(SPA)的步骤在SQL Server Management Studio中创建数据库打开Visual Studio Communi ...
带有Upida/Jeneva.Net的ASP.NET MVC单页应用程序（后端）
目录介绍问题问题1 问题2 问题3 解决方案问题1--智能序列化问题2--反向引用问题3--映射更新说明下载源3.4 MB 在Codeplex上下载最新版本参见工作示例介绍让我们 ...

用ng-view创建单页APP

用ng-view创建单页APP相关推荐

最新文章

热门文章