AngularJS ir superheroisks JavaScript ietvars, kas ļoti vienkāršo vienas lapas lietojumprogrammu (SPA) izveidi. Papildus tam AngularJS ir pieejams nedaudz leņķisko moduļu, kurus var izmantot, lai radītu lielisku lietotāja pieredzi. Šajā ziņojumā mēs redzēsim, kā izmantot populāro ngAnimate, lai leņķa skatiem pievienotu lapu pārejas / animācijas.
ngAnimate var izmantot ar dažādām direktīvām, piemēram, ngRepeat, ngView, ngInclude, ngIf, ngMessage utt.
Šajā ierakstā mēs izmantosim animācijas ar ngView
Šeit mēs izmantojam Adobe iekavās IDE, taču jūs varat brīvi izmantot citus, piemēram, Sublime Text, WebStorm no JetBrains utt.
Piezīme : Mēs izmantosim arī Bootswatch Bootstrap API, lai mūsu HTML lapām piešķirtu skaistu izskatu
Projekta struktūra:
Zemāk ir projekta struktūra iekavās IDE
Šeit ir īss katra projektā izmantotā faila apraksts
animācija.css - galvenais CSS fails, kurā mēs definējam mūsu lapu animācijas
bootstrap.min.css - bootwatch bootstrap, lai dotu mūsu iezīmē skaistu izskatu
config.js - galvenais JavaScript fails, kurā mēs definējam mūsu leņķa moduli, kā arī maršrutus un kontrolierus
shellPage.html - Šī ir čaulas lapa, kurā citi skati tiks dinamiski ielādēti
view1.html, view2.html, view3.html - Šie ir daļējie skati, kas tiks ielādēti shellPage
Kā tiek izmantotas animācijas:
ngAnimate piemēro CSS klases dažādām leņķa direktīvām atkarībā no tā, vai tās ienāk skatā vai iziet no tās
.ng-enter - Šī CSS klase attiecas uz direktīvu, kad tā tiek ielādēta lapā
.ng-atvaļinājums - Šī CSS klase attiecas uz direktīvu, kad tā atstāj lapu
Apskatīsim katru failu pa vienam
shellPage.html
shellPage ielādē nepieciešamos resursus, pielieto ng-app ķermenim un pievieno ng-view, lai dinamiski injicētu skatus.
config.js
Konfigurācijas failā mēs definējam mūsu leņķa moduli kopā ar maršrutiem un kontrolieriem.
Modulim transitApp ir divas atkarības: ngAnimate un ngRoute
var pārejaApp = leņķa.modulis ('pārejaApp', ['ngAnimate', 'ngRoute']) pārejaApp.config (funkcija ($ routeProvider) {$ maršruta nodrošinātājs .when ('/', {templateUrl: 'daļējs / skats1.html' , kontrolieris: 'view1Controller'})) .when ('/ view2', {templateUrl: 'partss / view2.html', kontrolleris: 'view2Controller'}) .when ('/ view3', {templateUrl: 'daļējs / view3. html ', controller:' view3Controller '})}}) pārejaApp.controller (' view1Controller ', funkcija ($ sfēra) {$ range.cssClass =' view1 '}) pārejaApp.controller (' view2Controller ', funkcija ($ sfēra) { $ scope.cssClass = 'view2'}) pārejaApp.controller ('view3Controller', funkcija ($ scope) {$ scope.cssClass = 'view3'})Mēs esam definējuši trīs daļējus skatus (skats1, skats2, skats3), kas tiks ievadīti čaulas lapā atkarībā no URL. Attiecīgie kontrolieri iestata atribūtu cssClass, kas ir CSS klases nosaukums, kas tiks lietots ng-view. Mēs definēsim savas animācijas šajās CSS klasēs, kas ielādēs katru lapu ar dažādām animācijām.
Daļējas lapas view1.html, view2.html, view3.html
Daļējās lappusēs nav nekā daudz, ir tikai teksts un saites uz citiem skatiem
view1.html
Tas ir 1. skats
2. skats 3. skats
view2.html
java sekla kopija vs dziļa kopija
Tas ir 2. skats
1. skats 3. skats
view3.html
Tas ir 3. skats
1. skats 2. skats
Atcerieties, ka šie trīs HTML faili ir daļējas lapas, kuras tiks ievadītas shellPage.html atbilstoši URL, kuru esam definējuši failā config.js
Stilu un animāciju definēšana:
Ievietosim nedaudz dzīves savos uzskatos, piemērojot tam CSS
.view {bottom: 0 padding-top: 200px position: absolūts teksta izlīdzinājums: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { krāsa: # 333 pozīcija: absolūta teksta izlīdzināšana: centra augšdaļa: 50 pikseļu platums: 100%} / * Daļēja skata lapu fona un teksta krāsas (skats1, skats2, skats3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0,91)}Lai veiktu tīru pāreju starp dažādiem skatiem, mēs iestatīsim CSS z-index īpašību
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Tagad ir pienācis laiks definēt mūsu animācijas
Slide Left Animation
/ * izvelciet pa kreisi * / @keyframes slideOutLeft {uz {pārveidot: translateX (-100%)}} @ -moz-keyframes slideOutLeft {uz {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}Scale Up Animācija
/ * palieliniet * / @ keyframes scaleUp {no {necaurredzamība: 0.3 transformācija: skala (0.8)}} @ -moz-keyframes skalaUp {no {necaurredzamība: 0.3 -moz-transform: skala (0.8)}} @ -webkit- keyframes scaleUp {from {necaurredzamība: 0,3 -webkit-transform: skala (0,8)}}Ieslīdiet no labās animācijas
kam lieto mongodb
/ * iebīdiet no labās puses * / @keyframes slideInRight {no {transform: translateX (100%)} uz {transform: translateX (0)}} @ -moz-keyframes slideInRight {no {-moz-transform: translateX (100 %)} uz {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {no {-webkit-transform: translateX (100%)} uz {-webkit-transform: translateX (0)}}Ieslīdiet no apakšējās animācijas
/ * slaids no apakšas * / @keyframes slideInUp {from {pārveidot: translateY (100%)} uz {transform: translateY (0)}} @ -moz-keyframes slideInUp {no {-moz-transform: translateY (100 %)} uz {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {no {-webkit-transform: translateY (100%)} uz {-webkit-transform: translateY (0)}}Pagrieziet un kritiet animāciju
/ * rotate and fall * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: vieglums- 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% {pārveidot: pagrieztZ (10deg) animācijas laiks-funkcija: vieglums-ārā} 40% {pārveidot: pagrieztZ (17deg)} 60% {pārveidot: pagrieztZ (16deg)} 100% {pārveidot: tulkotY (100%) pagrieztZ (17deg)}}Pagrieziet Avīzes animāciju
/ * pagriezt avīzi * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) necaurredzamība: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) necaurredzamība: 0}} @ keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) necaurredzamība: 0}}Animāciju lietošana:
Ir pienācis laiks izmantot animācijas, kuras mēs jau iepriekš definējām
Skatīt 1 animāciju
/ * Skatiet 1 animācijas lapas atvaļinājumam un ievadiet * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s abi vieglāk-in -moz-animācijas: slideOutLeft 0.5s abi vieglāk-animācijas: slideOutLeft 0.5s gan vieglie -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s gan vieglums-in -moz-animācija: scaleUp 0.5s gan vieglums-in animācija: scaleUp 0.5s gan vieglums-in}Skatīt 2 animācijas
/ * Apskatiet 2 animācijas lapas atstāšanai un ievadiet * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s both-in -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s 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 abas vienkāršības animācijas: slideInRight 0.5s abas vieglākas iekļaušanas iespējas}Skatīt 3 animācijas
/ * Skatiet 3 animācijas lapas atvaļinājumam un ievadiet * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s gan easy-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s both-help-in transform-origin: 50% 50% animation: rotateOutNewspaper .5s both easy-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s abi viegli -in -moz-animation: slideInUp 0.5s abas vieglākas animācijas: slideInUp 0.5s abas vieglāk-in}Mēs esam paveikuši visas izmaiņas. Tagad ir pienācis laiks palaist lietojumprogrammu
Programmas palaišana
Palaižot lietojumprogrammu, jums tiks parādīta šī lapa:
Noklikšķiniet uz saitēm, un jūs redzēsiet animācijas spēlē, ievadot un atstājot daļējās lapas.
Ir dažādas citas animācijas, kuras var izmantot. Arī milzīgs iespējamo efektu kopums var būt šeit: http://tympanus.net/Development/PageTransitions/
Lejupielādējiet kodu un izmēģiniet to pats
[buttonleads form_title = ”Lejupielādēt kodu” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Lejupielādēt kodu”]
Es ceru, ka jums patika iepriekš minētais emuārs Animācija ar ngAnimate. Ja vēlaties dziļi ienirt Angular JS, es iesaku jums apskatīt mūsu kursa lapa. Angurālās JS sertifikācijas apmācības Edureka padarīs jūs par Angular JS ekspertu, izmantojot tiešās instruktoru vadītās sesijas un praktiskās apmācības, izmantojot reālās dzīves gadījumus.
Vai mums ir jautājums? Lūdzu, pieminējiet to komentāru sadaļā, un mēs ar jums sazināsimies.
Saistītās ziņas:
Parsējot XML failus, izmantojot SAX Parser