AngularJS je superherojski JavaScript okvir, ki olajša ustvarjanje aplikacij za eno stran (SPA). Poleg tega AngularJS prihaja s peščico kotnih modulov, ki jih lahko uporabimo za izjemno uporabniško izkušnjo. V tej objavi bomo videli, kako uporabiti priljubljeni ngAnimate za dodajanje prehodov strani / animacij v kotne poglede.
ngAnimate lahko uporabljate z različnimi direktivami, kot so ngRepeat, ngView, ngInclude, ngIf, ngMessage itd.
V tem prispevku bomo uporabili animacije z ngView
Tu uporabljamo Brake IDE podjetja Adobe, lahko pa uporabljate tudi druge, na primer Sublime Text, WebStorm podjetja JetBrains itd.
Opomba : Za čudovit videz naših strani HTML bomo uporabili tudi API Bootwatch Bootstrap
Struktura projekta:
Spodaj je struktura projekta v oklepajih IDE
Tu je kratek opis vsake datoteke, uporabljene v projektu
animation.css - glavna datoteka CSS, v kateri določimo animacije strani
bootstrap.min.css - bootwatch bootstrap za dajanje naših označuje čudovit videz
config.js - glavna datoteka JavaScript, kjer definiramo kotni modul skupaj z usmeritvami in krmilniki
shellPage.html - To je stran lupine, na kateri se bodo drugi pogledi dinamično nalagali
view1.html, view2.html, view3.html - To so delni pogledi, ki bodo naloženi v shellPage
Kako se uporabljajo animacije:
ngAnimate uporablja razrede CSS za različne direktive Angular, odvisno od tega, ali vstopajo ali zapuščajo pogled
.ng-enter - Ta razred CSS velja za direktivo vsakič, ko se naloži na strani
preobremenitev in razveljavitev v javi
.ng-dopust - Ta razred CSS velja za direktivo vsakič, ko zapusti stran
Pojdimo po vsaki datoteki eno za drugo
shellPage.html
shellPage naloži zahtevane vire, uporabi telo ng-app in doda ng-view za dinamično vstavljanje pogledov.
config.js
V konfiguracijski datoteki definiramo kotni modul skupaj z usmeritvami in krmilniki.
Modul prehodaApp ima dve odvisnosti: ngAnimate in ngRoute
var prehodApp = angular.module ('prehodApp', ['ngAnimate', 'ngRoute']) prehodApp.config (funkcija ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , krmilnik: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', krmilnik:' view3Controller '})}) prehodApp.controller (' view1Controller ', funkcija ($ obseg) {$ scope.cssClass =' view1 '}) prehodApp.controller (' view2Controller ', funkcija ($ obseg) { $ scope.cssClass = 'view2'}) prehodApp.controller ('view3Controller', funkcija ($ obseg) {$ scope.cssClass = 'view3'})Določili smo tri delne poglede (pogled1, pogled2, pogled3), ki bodo vstavljeni v lupino, odvisno od URL-ja. Respons Controllers nastavi atribut cssClass, ki je ime razreda CSS, ki bo uporabljen za pogled ng. Svoje animacije bomo opredelili v teh razredih CSS, ki bodo vsako stran naložili z različnimi animacijami.
Delne strani view1.html, view2.html, view3.html
Na delnih straneh ni kaj dosti, le nekaj besedila in povezav do drugih pogledov
pogled1.html
To je pogled 1
Pogled 2 Pogled 3
view2.html
To je pogled 2
Pogled 1 Pogled 3
view3.html
To je pogled 3
Pogled 1 Pogled 2
Ne pozabite, da so te tri datoteke HTML delne strani, ki bodo vstavljene v shellPage.html v skladu z URL-jem, ki smo ga definirali v datoteki config.js
Določanje slogov in animacij:
Dajmo nekaj življenja v naše poglede tako, da nanj uporabimo CSS
.view {spodaj: 0 padding-top: 200px položaj: absolutna poravnava besedila: center zgoraj: 0 širina: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { barva: # 333 položaj: absolutna poravnava besedila: sredina zgoraj: 50px širina: 100%} / * Barve ozadja in besedila za strani z delnim ogledom (pogled1, pogled2, pogled3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Za čist prehod med različnimi pogledi bomo nastavili lastnost indeksa CSS
.view.ng-zapusti {z-index: 9999} .view.ng-enter {z-index: 8888}Zdaj je čas, da določimo naše animacije
Drsna leva animacija
/ * izvlecite levo * / @keyframes slideOutLeft {za {preoblikovanje: translateX (-100%)}} @ -moz-keyframes slideOutLeft {v {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {do {-webkit-transform: translateX (-100%)}}Povečajte animacijo
/ * povečaj * / @keyframes scaleUp {od {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {od {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- keyframes scaleUp {od {opacity: 0,3 -webkit-transform: scale (0.8)}}Potisnite iz desne animacije
/ * potisnite z desne * / @keyframes slideInRight {iz {transform: translateX (100%)} v {transform: translateX (0)}} @ -moz-keyframes slideInRight {iz {-moz-transform: translateX (100 %)} v {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {iz {-webkit-transform: translateX (100%)} v {-webkit-transform: translateX (0)}}Potisnite iz spodnje animacije
/ * drsite od spodaj * / @keyframes slideInUp {od {transform: translateY (100%)} do {transform: translateY (0)}} @ -moz-keyframes slideInUp {od {-moz-transform: translateY (100 %)} v {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {iz {-webkit-transform: translateY (100%)} v {-webkit-transform: translateY (0)}}Zavrti in padec animacije
/ * zasukaj in pusti * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: easy- out} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -keyframes rotateFall {0% {-moz-transform: rotateZ (0deg)} 20% {-moz-transform: rotateZ (10deg) -moz-animation-timing-function: easy-out} 40% {-moz-transform: rotateZ (17deg)} 60% {-moz-transform: rotateZ (16deg)} 100% {-moz-transform: translateY (100%) rotateZ (17deg)}} @keyframes rotateFall {0% {transform: rotateZ (0deg) } 20% {preoblikovanje: rotateZ (10deg) animacija-časovna funkcija: sprostitev} 40% {preoblikovanje: rotateZ (17deg)} 60% {preoblikovanje: rotateZ (16deg)} 100% {preoblikovanje: translateY (100%) zasukajZ (17deg)}}Zavrtite časopisno animacijo
/ * zavrti časopis * / @ -webkit-keyframes rotateOutNewspaper {do {-webkit-transform: translateZ (-3000px) rotateZ (360deg) motnost: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) motnost: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) motnost: 0}}Uporaba animacij:
Čas je, da uporabimo animacije, ki smo jih definirali prej
Oglejte si 1 animacije
/ * Oglejte si 1 animacijo za zapustitev strani in vnesite * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s, enostavnost v -moz-animacija: slideOutLeft 0.5s, enostavnost animacije: slideOutLeft 0.5s, enostavnost -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5s, enostavnost v -moz-animacija: scaleUp 0,5s, tako enostavna animacija: scaleUp 0,5s, tako easy-in}Oglejte si 2 animaciji
/ * Oglejte si 2 animaciji za dopust strani in vnesite * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s easy-in -moz-transform-origin: 0% 0% -moz-animacija: rotateFall 1s, enostavnost pretvorbe: 0% 0% animacija: rotateFall 1s, enostavnost} .view2.ng-enter {-webkit-animacija: slideInRight 0.5s, oba enostavnost - moz-animacija: slideInRight 0,5s, tako enostavna animacija: slideInRight 0,5s, tako enostavna}Oglejte si 3 animacije
/ * Oglejte si 3 animacije za dopust strani in vnesite * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s easy-in -moz-transform-origin: 50 % 50% -moz-animacija: rotateOutNewspaper .5s sta enostavna pri preoblikovanju izvora: 50% 50% animacija: rotateOutNewspaper .5s sta enostavna} .view3.ng-enter {-webkit-animation: slideInUp 0.5s. -in -moz-animacija: slideInUp 0,5s, tako enostavna animacija: slideInUp 0,5s, tako easy-in}Končali smo z vsemi spremembami. Zdaj je čas, da zaženete aplikacijo
Zagon aplikacije
Ob zagonu aplikacije se vam prikaže spodnja stran:
Kliknite povezave in videli boste animacije v igri, ob vstopu in zapuščanju delnih strani.
Obstajajo različne druge animacije, ki jih lahko uporabite. Tu je lahko tudi ogromno možnih učinkov: http://tympanus.net/Development/PageTransitions/
Prenesite kodo in jo preizkusite sami
kako postati inženir umetne inteligence
[buttonleads form_title = ”Prenesi kodo” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Download Code”]
Upam, da vam je bila zgornja animacija z blogom ngAnimate všeč. Če se želite poglobiti v Angular JS, vam priporočam, zakaj si ne oglejte našega stran tečaja. Usposabljanje Angular JS Certification v podjetju Edureka vas bo postalo strokovnjaka za Angular JS prek sej pod vodstvom inštruktorjev v živo in praktičnega usposabljanja z uporabo resničnih primerov.
Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje in se vam bomo javili.
Sorodne objave:
Razčlenjevanje datotek XML s pomočjo razčlenjevalnika SAX