„AngularJS“ yra superherojiškas „JavaScript“ pagrindas, leidžiantis labai lengvai sukurti „Single Page Applications“ (SPA). Be to, „AngularJS“ turi keletą kampinių modulių, kuriuos galima naudoti norint sukurti nuostabią vartotojo patirtį. Šiame įraše mes pamatysime, kaip naudoti populiarią „ngAnimate“, norint pridėti kampinių rodinių puslapio perėjimus / animacijas.
„ngAnimate“ galima naudoti su įvairiomis direktyvomis, tokiomis kaip „ngRepeat“, „ngView“, „ngInclude“, „ngIf“, „ngMessage“ ir kt.
Šiame įraše naudosime animacijas su „ngView“
Čia mes naudojame „Adobe“ skliausteliuose IDE, tačiau galite laisvai naudoti kitus, pvz., „Sublime Text“, „WebStorm“ iš „JetBrains“ ir kt.
Pastaba: Mes taip pat naudosime „Bootswatch Bootstrap“ API, kad mūsų HTML puslapiai būtų gražūs
Projekto struktūra:
Žemiau pateikiama projekto struktūra skliausteliuose IDE
Čia pateikiamas trumpas kiekvieno projekte naudojamo failo aprašymas
yra-santykiai java
animacija.css - pagrindinis CSS failas, kuriame mes apibrėžiame savo puslapio animacijas
bootstrap.min.css - batų laikrodžio užpakalinis diržas už mūsų dovanojimą žymi gražią išvaizdą
config.js - pagrindinis „JavaScript“ failas, kuriame mes apibrėžiame kampinį modulį, maršrutus ir valdiklius
shellPage.html - Tai yra apvalkalo puslapis, kuriame dinamiškai bus įkeliami kiti rodiniai
view1.html, view2.html, view3.html - Tai yra daliniai rodiniai, kurie bus įkelti į „shellPage“
Kaip taikomos animacijos:
„ngAnimate“ taiko CSS klases skirtingoms „Angular“ direktyvoms, atsižvelgiant į tai, ar jos įeina, ar išeina iš rodinio
.ng-enter - Ši CSS klasė taikoma direktyvai, kai ji įkeliama į puslapį
.ng-atostogos - Ši CSS klasė taikoma direktyvai, kai ji palieka puslapį
Peržiūrėkime kiekvieną failą po vieną
shellPage.html
„shellPage“ įkelia reikiamus išteklius, pritaiko „ng-app“ kūnui ir prideda „ng-view“, kad dinamiškai įterptų rodinius.
config.js
Konfigūracijos faile mes apibrėžiame savo kampinį modulį, maršrutus ir valdiklius.
Modulio transitApp turi dvi priklausomybes: ngAnimate ir ngRoute
var transitApp = kampinis.module ('pārejaApp', ['ngAnimate', 'ngRoute']) perėjimasApp.config (funkcija ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partijos / vaizdas1.html' , valdiklis: 'view1Controller'})) .kada ('/ view2', {templateUrl: 'partss / view2.html', valdiklis: 'view2Controller'})) .when ('/ view3', {templateUrl: 'partss / view3. html ', controller:' view3Controller '})}}) pārejaApp.controller (' view1Controller ', funkcija ($ sritis) {$ scope.cssClass =' view1 '}) pereinamasisApp.controller (' view2Controller ', funkcija ($ sritis) { $ scope.cssClass = 'view2'}) transitApp.controller ('view3Controller', funkcija ($ scope) {$ scope.cssClass = 'view3'})Apibrėžėme tris dalines peržiūras (view1, view2, view3), kurios bus įterptos į apvalkalą, atsižvelgiant į URL. Atitinkami valdikliai nustato atributą „cssClass“, kuris yra CSS klasės pavadinimas, kuris bus taikomas „ng-view“. Mes apibrėžsime savo animacijas šiose CSS klasėse, kurios kiekvieną puslapį įkraus skirtingomis animacijomis.
Daliniai puslapiai view1.html, view2.html, view3.html
Daliniuose puslapiuose nėra nieko, yra tik tekstas ir nuorodos į kitas peržiūras
view1.html
Tai rodinys 1
2 vaizdas 3 vaizdas
view2.html
Tai rodinys 2
1 vaizdas 3 vaizdas
view3.html
Tai yra „View 3“
1 vaizdas 2 vaizdas
Atminkite, kad šie trys HTML failai yra daliniai puslapiai, kurie bus įterpti į shellPage.html pagal URL, kurį nustatėme config.js faile
Stilių ir animacijų apibrėžimas:
Įdėkime šiek tiek gyvenimo į savo nuomonę, pritaikydami jai CSS
metodo perkrovos ir metodo nepaisymo skirtumas
.view {bottom: 0 padding-top: 200px position: absoliutus teksto sulyginimas: centre viršuje: 0 plotis: 100%}. view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { spalva: # 333 padėtis: absoliutus teksto sulyginimas: vidurinis viršus: 50 taškų plotis: 100%} / * Dalinio rodinio puslapių (rodinys1, rodinys2, rodinys3) fono ir teksto spalvos ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Norėdami atlikti švarų perėjimą tarp skirtingų rodinių, nustatysime CSS z indekso ypatybę
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Dabar atėjo laikas apibrėžti mūsų animacijas
„Slide Left Animation“
/ * išstumkite kairę * / @keyframes slideOutLeft {į {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {į {-webkit-transform: translateX (-100%)}}„Scale Up Animation“
/ * mastelio padidinimas * / @keyframes scaleUp {iš {neskaidrumas: 0.3 transformacija: skalė (0.8)}} @ -moz-keyframes scaleUp {iš {neskaidrumas: 0.3 -moz-transformacija: skalė (0.8)}} @ -webkit- keyframes scaleUp {from {neskaidrumas: 0,3 -webkit-transformas: skalė (0,8)}}Pristatymas iš dešinės animacijos
/ * įstumkite iš dešinės * / @keyframes slideInRight {iš {transform: translateX (100%)} į {transform: translateX (0)}} @ -moz-keyframes slideInRight {iš {-moz-transform: translateX (100 %)} į {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {iš {-webkit-transform: translateX (100%)} į {-webkit-transform: translateX (0)}}Pristatymas iš apačios animacijos
/ * įstumkite iš apačios * / @keyframes slideInUp {iš {transform: translateY (100%)} į {transform: translateY (0)}} @ -moz-keyframes slideInUp {iš {-moz-transform: translateY (100 %)} į {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {iš {-webkit-transform: translateY (100%)} į {-webkit-transform: translateY (0)}}Sukti ir kristi animacija
/ * pasukti ir nukristi * / @ -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% {transform: rotateZ (10deg) animacijos laiko nustatymo funkcija: lengvumas-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) pasuktiZ (17 laipsnių)}}Pasukti laikraščio animaciją
/ * pasukti laikraštį * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) neskaidrumas: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) neskaidrumas: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Animacijų taikymas:
Atėjo laikas pritaikyti animacijas, kurias buvome apibrėžę anksčiau
Peržiūrėti 1 animaciją
/ * Peržiūrėkite 1 animaciją, jei norite palikti puslapį, ir įveskite * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s. Abu lengvai įjungia -moz-animacija: slideOutLeft 0.5s. Abu. -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s abu „easy-in -moz-animation“: „scaleUp 0.5s“ abu „easy-in“ animacija: „scaleUp 0.5s“ abu „easy-in“}Peržiūrėti 2 animacijas
/ * Peržiūrėkite 2 animacijos puslapių palikimui ir įveskite * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s easy-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s both easy-in transform-origin: 0% 0% animation: rotateFall 1s both easy-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s both easy-in - „moz-animation“: „slideInRight 0.5s“ ir „easy-in“ animacija: „slideInRight 0.5s“.Peržiūrėti 3 animacijas
/ * Peržiūrėkite 3 animacijos puslapių palikimui ir įveskite * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s both-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s easy-in-transformation-origin: 50% 50% animation: rotateOutNewspaper .5s both easy-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s abi lengviau -in -moz-animation: „slideInUp 0.5s“ ir „animaciniai“: „slideInUp 0.5s“, abu - „easy-in“}Mes atlikome visus pakeitimus. Dabar atėjo laikas paleisti programą
Programos vykdymas
Vykdydami programą, jums bus pateiktas žemiau pateiktas puslapis:
hibridinė sistema seleno žiniatinklio tvarkyklėje
Spustelėkite nuorodas ir pamatysite, kaip bus rodomos animacijos, įeinant ir paliekant dalinius puslapius.
Galima naudoti įvairias kitas animacijas. Be to, didžiulis galimų efektų rinkinys gali būti čia: http://tympanus.net/Development/PageTransitions/
Atsisiųskite kodą ir išbandykite patys
[buttonleads form_title = „Atsisiųsti kodą“ redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Atsisiųsti kodą”]
Tikiuosi, kad jums patiko aukščiau pateiktas „Animacija su ngAnimate“ tinklaraščiu. Jei norite giliai pasinerti į „Angular JS“, rekomenduočiau jums nežiūrėti į mūsų kurso puslapis. „Angur JS“ sertifikavimo mokymai „Edurekoje“ padarys jus „Angular JS“ ekspertais per tiesiogines instruktorių vedamas sesijas ir praktinius mokymus, naudojant realaus gyvenimo atvejus.
Turite mums klausimą? Prašau paminėti tai komentarų skiltyje ir mes su jumis susisieksime.
Susijusios žinutės:
XML failų analizavimas naudojant SAX analizatorių