国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
使用ngView配合AngularJS應(yīng)用實(shí)現(xiàn)動畫效果的方法
AngularJS 提供了一個很棒的方式來創(chuàng)建單頁app。正是由于這個原因,使得我們的站點(diǎn)看起來更像是一個原生的手機(jī)程序。為了使它看起來更像是原生的程序,我們可以使用 ngAnimate module 為它添加過渡和動畫效果。
這個模塊可以使我們創(chuàng)建漂亮的程序。今天,我們將要看一下如何為 ng-view 添加動畫效果。
我們要構(gòu)建什么
我們假設(shè)我們有一個單頁面的程序,并且想為這個頁面添加動畫效果。點(diǎn)擊某一個鏈接會將一個試圖滑出,同時將另一個試圖滑入。
我們將會使用:
使用 ngRoute 來為我們的頁面路由
使用 ngAnimate 來為頁面創(chuàng)建動畫效果
對頁面使用 CSS Animations
當(dāng)我們離開或進(jìn)入試圖時,我們的每一個頁面會有不同的動畫效果
Extreme Animations: 我們在這里使用的動畫效果就是上面提到的這些。精巧的動畫效果可以為你的站點(diǎn)增色不少,僅僅是demo頁面就足夠令我們?yōu)橹偪窳恕?動畫效果來自于Codrops上的 A Collection of Page Transitions
它如何工作?
讓我們看一下ngAnimate是如何工作的。ngAnimate 會根據(jù)是進(jìn)入還是離開視圖來為不同的Angular 指令(directive)添加和移除不同的CSS類名。例如,當(dāng)我們加載網(wǎng)站時,無論ng-view中填充了什么都會得到一個.ng-enter的類名。
我們所需要做的就是給.ng-enter 類名添加CSS動畫效果,該動畫在進(jìn)入的時候會自動生效。
ngAnimate 可以應(yīng)用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass
一定要查看 ngAnimate 文檔 來了解ngAnimate更多的功能。接下來,讓我們在實(shí)際應(yīng)用中了解一下。
開始我們的程序
以下使我們需要的文件:
- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html
讓我們從 index.html 開始,我們將會加載 AngularJS, ngRoute 以及 ngAnimate。對了,不要忘了使用Bootstrap 來定義樣式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 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="
<script src="
<script src="
<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
現(xiàn)在,我們需要將會創(chuàng)建一個帶路由的Angular程序,以便我們可以在不刷新頁面的情況下修改我們的頁面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 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)建了我們的程序、路由以及控制器。
每一個控制器都有一個它自己的pageClass變量。改變了的值會被添加到index.html文件中的ng-view中,這樣我們的每一個頁面都有了不同的類名。通過這些不同的類名,我們可以為不同的頁面添加不同的動畫效果。
視圖 page-home.html, page-about.html, page-contact.html
這些應(yīng)該盡量保持清晰并且直接明了。我們只需要為每個頁面準(zhǔn)備一些文字以及鏈到其他頁面的鏈接地址。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 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)在,我們擁有了我們的頁面,通過使用Angular的路由功能可以將這些頁面注入到我們的主index.html文件中。
現(xiàn)在,所有的乏味的工作已經(jīng)完成。我們的程序應(yīng)該可以正常工作,并且可以很好的修改頁面。接下來,讓我們進(jìn)入下一步,為頁面添加動畫效果!
為App添加動畫效果 style.css
我們將使用CSS來添加所有的動畫效果。這種方法很棒,因?yàn)槲覀兯龅氖戮褪翘砑觧gAnimate,并且不用修改我們的代碼就可以添加CSS動畫效果。
ngAnimate為我們的ng-view添加的兩個類分別是.ng-enter和.ng-leave。你可以想象一些他們各自的作用。
基礎(chǔ)樣式
為了使我們的程序看起來不那么乏味,我們將會添加一些基礎(chǔ)的樣式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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; }
通過以上的代碼,我們?yōu)?個頁面添加了基礎(chǔ)的樣式。當(dāng)我們點(diǎn)擊程序的時候,我們可以看到它們應(yīng)用了不同的顏色和間距。
CSS 動畫
讓我們定義我們的動畫效果,之后我們將會了解一下當(dāng)頁面進(jìn)入或離開的時候我們怎么才能為不同的頁面應(yīng)用不用的動畫效果。
Vendor Prefixes: 我們將會使用默認(rèn)的CSS屬性,不帶任何前綴的。完整的代碼會包含所有的前綴。
我們定義了6個不同的動畫效果。每一個頁面都會有他們各自的ng-enter 和 ng-leave 的動畫效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 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é)合以上我們所定義的動畫效果,我們將會把它們應(yīng)用到我們的頁面上。
進(jìn)入和離開動畫效果
我們只需要將這些動畫效果應(yīng)用給.ng-enter 或 .ng-leave就可以為我們的頁面添加不用的動畫效果。
1
2
3
4
5
6
7
/* 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)在,我們的程序就會有像上面那樣的動畫效果了。當(dāng)離開的時候,頁面會向左滑出,當(dāng)進(jìn)入的時候會放大。我們還添加了z-index屬性,以便離開的頁面會處于進(jìn)入的頁面的上層。
讓我們看一下如何為具體的頁面創(chuàng)建動畫。
具體頁面的動畫效果
我們?yōu)椴煌捻撁鎰?chuàng)建了各自的Angular 控制器。在這些控制器里面,我們添加了一個pageClass并且將它添加到我們的<div ng-view>中。我們將會使用這些類名來引出具體的頁面。
不像上面的.ng-enter 和 .ng-leave那樣,我們使它們更加具體化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
.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)在,每一個頁面都有它各自唯一的進(jìn)入和離開的動畫效果。
總結(jié)
為我們的Angular程序添加動畫效果是相當(dāng)容易的。你所需要做的就是加載ngAnimate并創(chuàng)建你的CSS動畫效果。真誠的希望這篇文章可以幫助你了解一些使用ng-view時的一些比較酷的動畫效果。
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
如何在Angular中使用動畫
在 AngularJS 應(yīng)用中處理單選框和復(fù)選框
AngularJS之頁面跳轉(zhuǎn)Route
AngularJs學(xué)習(xí)筆記--bootstrap
基于AngularJs + Bootstrap + AngularStrap 省市區(qū)聯(lián)動實(shí)踐
學(xué)習(xí) kityminder & angular (十三)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服