AngularJS-sovellusten animointi ngAnimate-sovelluksella



Tässä blogissa kerrotaan, kuinka suositun ngAnimaten avulla lisätään sivunsiirtymiä / animaatioita kulmanäkymiin, eli kuinka animaatio luodaan ngAnimaten avulla

AngularJS on supersankarillinen JavaScript-kehys, joka tekee Single Page Applications (SPA) -sovellusten luomisen erittäin helpoksi. Tämän lisäksi AngularJS: ssä on kourallinen kulmamoduuleja, joita voidaan käyttää luomaan mahtava käyttökokemus. Tässä viestissä aiomme nähdä, kuinka suositun ngAnimaten avulla lisätään sivunsiirtymiä / animaatioita kulmanäkymiin.

nukke vs ansible vs kokki

ngAnimatea voidaan käyttää useiden direktiivien kanssa, kuten ngRepeat, ngView, ngInclude, ngIf, ngMessage jne.





Tässä viestissä käytämme animaatioita ngView: n kanssa

Täällä käytämme Adoben ID-suluita, mutta voit vapaasti käyttää muita, esimerkiksi Sublime Text, JetBrainsin WebStorm jne.



Huomautus : Käytämme myös Bootswatch Bootstrap -sovellusliittymää antaaksemme HTML-sivuillemme kauniin ilmeen

Projektin rakenne:

Alla on projektirakenne suluissa IDE



ngAnimate-angularjs-project-structure

Tässä on lyhyt kuvaus kustakin projektissa käytetystä tiedostosta

animation.css - CSS-päätiedosto, jossa määritämme sivun animaatiot

bootstrap.min.css - saappaat ranneke antaa meille merkitsee kauniin ilmeen

config.js - tärkein JavaScript-tiedosto, jossa määritetään kulmamoduulimme sekä reitit ja ohjaimet

shellPage.html - Tämä on shell-sivu, johon muut näkymät ladataan dynaamisesti

näkymä1.html, näkymä2.html, näkymä3.html - Nämä ovat osittaisia ​​näkymiä, jotka ladataan shellPageen

Kuinka animaatioita käytetään:

ngAnimate käyttää CSS-luokkia erilaisiin kulmadirektiiveihin sen mukaan, ovatko ne siirtymässä vai poistumassa näkymästä

.ng-enter - Tätä CSS-luokkaa sovelletaan direktiiviin aina, kun se ladataan sivulle

.ng-jätä - Tätä CSS-luokkaa sovelletaan direktiiviin aina, kun se poistuu sivulta

Käydään läpi kaikki tiedostot yksi kerrallaan

shellPage.html

shellPage lataa tarvittavat resurssit, lisää ng-sovelluksen runkoon ja lisää ng-näkymän injektoimaan näkymät dynaamisesti.

  

config.js

Määritystiedostossa määritämme kulmamoduulimme sekä reitit ja ohjaimet.

aseta luokan polku linuxissa

Moduulin transitApp: lla on kaksi riippuvuutta: ngAnimate ja ngRoute

var transitApp = kulmainen moduuli ('transitApp', ['ngAnimate', 'ngRoute']) siirtymäApp.config (funktio ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'osiot / näkymä1.html' , ohjain: 'view1Controller'})). kun ('/ view2', {templateUrl: 'partss / view2.html', ohjain: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partss / view3. html ', ohjain:' view3Controller '})}) pārejaApp.controller (' view1Controller ', funktio ($ scope) {$ scope.cssClass =' ​​view1 '}) transitApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) pārejaApp.controller ('view3Controller', funktio ($ scope) {$ scope.cssClass = 'view3'})

Olemme määrittäneet kolme osittaista näkymää (näkymä1, näkymä2, näkymä3), jotka injektoidaan shell-sivulle URL-osoitteen mukaan. Vastaavat ohjaimet asettavat cssClass-määritteen, joka on CSS-luokan nimi, jota käytetään ng-näkymässä. Määritämme animaatiomme näissä CSS-luokissa, jotka lataavat jokaisen sivun erilaisilla animaatioilla.

Osasivut view1.html, view2.html, view3.html

Osasivuilla ei ole paljon, vain tekstiä ja linkkejä muihin näkymiin

view1.html

Tämä on näkymä 1

Näkymä 2 Näkymä 3

view2.html

Tämä on näkymä 2

Näkymä 1 Näkymä 3

view3.html

Tämä on näkymä 3

Näkymä 1 Näkymä 2

Muista, että nämä kolme HTML-tiedostoa ovat osittaisia ​​sivuja, jotka injektoidaan shellPage.html-tiedostoon sen URL-osoitteen mukaan, jonka olemme määrittäneet config.js-tiedostossa

Tyylien ja animaatioiden määritteleminen:

Otetaan hieman elämää näkemyksiimme soveltamalla siihen CSS: ää

.view {bottom: 0 padding-top: 200px position: absoluuttinen tekstin tasaus: keskimmäinen top: 0 leveys: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { väri: # 333 sijainti: absoluuttinen tekstin tasaus: keskimmäinen yläosa: 50 kuvapisteen leveys: 100%} / * Osanäkymän sivujen taustan ja tekstin värit (näkymä1, näkymä2, näkymä3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}

Puhtaan siirtymän luomiseksi eri näkymien välillä asetamme CSS z-index -ominaisuuden

.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}

Nyt on aika määritellä animaatiomme

Dian vasen animaatio

/ * liu'uta vasemmalle * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}

Suurenna animaatiota

/ * skaalaa ylöspäin * / @ avainkehykset scaleUp {mistä {läpinäkyvyys: 0,3 muunnos: mittakaava (0,8)}} @ -moz-avainkehykset skaalaUp {mistä {peittävyys: 0,3 -moz-muunnos: mittakaava (0,8)}} @ -webkit- keyframes scaleUp {from {peittävyys: 0.3 -webkit-muunna: asteikko (0.8)}}

Liu'uta sisään oikealta animaatiolta

/ * liu'uta sisään oikealta * / @keyframes slideInRight {mistä {transform: translateX (100%)} muotoon {transform: translateX (0)}} @ -moz-keyframes slideInRight {mistä: {-moz-transform: translateX (100 %)} muotoon {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {mistä {-webkit-transform: translateX (100%)} muotoon {-webkit-transform: translateX (0)}}

Liu'uta sisään pohjaanimaatiosta

/ * liu'uta sisään alhaalta * / @keyframes slideInUp {mistä {muunna: käännäY (100%)} muotoon {muunna: käännäY (0)}} @ -moz-avainkehykset slideInUp {mistä: {-moz-muunna: käännäY (100 %)} muotoon {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {mistä {-webkit-transform: translateY (100%)} muotoon {-webkit-transform: translateY (0)}}

Kierrä ja pudota animaatio

/ * kiertää ja pudota * / @ -webkit-avainkehykset rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animaatio-ajoitus-toiminto: helppous- ulos} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -avainkehykset 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)}} @ avainkehykset rotateFall {0% {transform: rotateZ (0deg) } 20% {muunna: pyöritäZ (10 astetta) animaatioajastustoiminto: helppous-ulostulo} 40% {muunnos: kiertääZ (17 astetta)} 60% {muunna: käännäZ (16 astetta)} 100% {muunna: käännäY (100%) kiertää Z (17 astetta)}}

Kierrä sanomalehden animaatio

/ * käännä sanomalehti * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opasiteetti: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) opasiteetti: 0}} @ avainkehykset rotateOutNewspaper {muunnettavaksi {transform: translateZ (-3000px) rotateZ (360deg) opasiteetti: 0}}

Animaatioiden käyttäminen:

On aika soveltaa animaatioita, jotka olimme määrittäneet aiemmin

Näytä 1 animaatiota

/ * Näytä yksi animaatio sivusivulle ja kirjoita * / .view1.ng-leave {-webkit-animaatio: slideOutLeft 0,5s molemmat helposti-in -moz-animaatiot: slideOutLeft 0,5s molemmat helppoa-animaatio: slideOutLeft 0,5s molemmat helpottavat -in} .view1.ng-enter {-webkit-animaatio: scaleUp 0.5s molemmat helppous -moz-animaatio: scaleUp 0.5s molemmat helppokäyttöinen animaatio: scaleUp 0.5s molemmat helpotus-in}

Näytä 2 animaatiota

/ * Tarkastele 2 animaatiota sivulomalle ja kirjoita * / .view2.ng-leave {-webkit-muunna-alkuperä: 0% 0% -webkit-animaatio: rotateFall 1s molemmat helpottavat -moz-muunna-alkuperä: 0% 0% -moz-animaatio: rotateFall 1s molemmat help-in-muuntaa-alkuperä: 0% 0% animaatio: rotateFall 1s molemmat help-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s molemmat helpot-in - moz-animaatio: slideInRight 0.5s molemmat helppokäyttöiset animaatiot: slideInRight 0.5s molemmat helpotukset}

Näytä 3 animaatiota

/ * Tarkastele 3 animaatiota sivulomalle ja kirjoita * / .view3.ng-leave {-webkit-muunna-alkuperä: 50% 50% -webkit-animaatio: rotateOutNewspaper .5s molemmat help-in -moz-muunna-alkuperä: 50 % 50% -moz-animation: rotateOutNewspaper .5s molemmat helpon muunnoksen alkuperä: 50% 50% animaatio: rotateOutNewspaper .5s molemmat help-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s molemmat helpottavat -in -moz-animaatio: slideInUp 0.5s molemmat helppokäyttöiset animaatiot: slideInUp 0.5s molemmat easy-in}

Kaikki muutokset on tehty. Nyt on aika suorittaa sovellus

Sovelluksen suorittaminen

mitä system.exit (0) tekee javassa

Kun suoritat sovellusta, sinulle näytetään seuraava sivu:

Napsauttamalla linkkejä näet animaatiot toistettavana, kun syötät osittaisia ​​sivuja ja poistut niistä.

On olemassa useita muita animaatioita, joita voidaan käyttää. Myös valtava joukko mahdollisia vaikutuksia voi olla täällä: http://tympanus.net/Development/PageTransitions/

Lataa koodi ja kokeile sitä itse

[buttonleads form_title = ”Lataa koodi” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Lataa koodi”]

Toivottavasti pidit yllä olevasta animaatiosta ngAnimate-blogilla. Jos haluat sukeltaa syvälle Angular JS: ään, suosittelen sinua, miksi et katso meidän kurssisivu. Edurekan Angular JS -sertifiointikoulutus tekee sinusta Angular JS -asiantuntijan live-ohjaajan vetämien istuntojen ja käytännön koulutuksen avulla, jossa käytetään tosielämän käyttötapauksia.

Onko sinulla kysymys meille? Mainitse se kommenttiosassa ja palaamme sinuun.

Aiheeseen liittyvät julkaisut:

XML-tiedostojen jäsentäminen SAX-jäsentimellä