„AngularJS“ programų animavimas naudojant „ngAnimate“

Šiame tinklaraštyje bus paaiškinta, kaip naudoti populiarią „ngAnimate“, norint puslapių perėjimus / animacijas pridėti prie kampinių vaizdų, t. Y. Kaip sukurti animaciją naudojant „ngAnimate“

„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

ngAnimate-angularjs-project-structure

Č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ų