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
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ä