AngularJS és un marc JavaScript superheroic que facilita la creació d'aplicacions de pàgina única (SPA). A més, AngularJS inclou un grapat de mòduls angulars que es poden utilitzar per crear una experiència d'usuari increïble. En aquest post veurem com utilitzar el popular ngAnimate per afegir transicions de pàgina / animacions a vistes angulars.
ngAnimate es pot utilitzar amb diverses directives com ngRepeat, ngView, ngInclude, ngIf, ngMessage, etc.
En aquest post utilitzarem animacions amb ngView
Aquí fem servir Brackets IDE d'Adobe, però podeu utilitzar-ne d'altres, per exemple, Sublime Text, WebStorm de JetBrains, etc.
Nota : També utilitzarem l’API Bootstrap de Bootswatch per donar un aspecte preciós a les nostres pàgines HTML
Estructura del projecte:
A continuació es mostra l'estructura del projecte a Brackets IDE
Aquí teniu la breu descripció de cada fitxer utilitzat al projecte
animation.css - fitxer CSS principal on definim les animacions de la nostra pàgina
bootstrap.min.css - bootswatch bootstrap per donar als nostres marca un aspecte preciós
config.js - fitxer principal JavaScript on definim el nostre mòdul angular juntament amb les rutes i els controladors
shellPage.html - Aquesta és la pàgina de l'intèrpret d'ordres en què es carregaran altres vistes dinàmicament
view1.html, view2.html, view3.html - Aquestes són les vistes parcials que es carregaran a la shellPage
Com s'apliquen les animacions:
ngAnimate aplica classes CSS a diferents directives angulars segons si entren o surten de la vista
.ng-enter - Aquesta classe CSS s'aplica a la directiva sempre que es carrega a la pàgina
què és la classe de pojo a java
.ng-leave - Aquesta classe CSS s'aplica a la directiva sempre que surt de la pàgina
Anem a revisar cada fitxer un per un
shellPage.html
shellPage carrega els recursos necessaris, aplica ng-app al cos i afegeix ng-view per injectar les vistes dinàmicament.
config.js
Al fitxer de configuració, definim el nostre mòdul angular juntament amb les rutes i els controladors.
El mòdul de transicióApp té dues dependències: ngAnimate i ngRoute
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (funció ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html') , controlador: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', controller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', controller:' view3Controller '})}) transitionApp.controller (' view1Controller ', function ($ scope) {$ scope.cssClass =' view1 '}) transitionApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) transitionApp.controller ('view3Controller', funció ($ scope) {$ scope.cssClass = 'view3'})Hem definit tres visualitzacions parcials (vista1, vista2, vista3) que s’injectaran a la pàgina d’intèrpret d’ordres en funció de l’URL. Respective Controllers estableix un atribut cssClass, que és el nom de la classe CSS, que s'aplicarà a la vista ng. Definirem les nostres animacions en aquestes classes CSS que carregaran cada pàgina amb animacions diferents.
Pàgines parcials view1.html, view2.html, view3.html
No hi ha res a les pàgines parcials, només hi ha text i enllaç a altres visualitzacions
view1.html
Aquesta és la vista 1
Vista 2 Vista 3
view2.html
Aquesta és la vista 2
Vista 1 Vista 3
view3.html
Aquesta és la vista 3
Vista 1 Vista 2
Recordeu que aquests tres fitxers HTML són pàgines parcials que s’injectaran a shellPage.html d’acord amb l’URL que hem definit al fitxer config.js
Definició d'estils i animacions:
Posem vida als nostres punts de vista aplicant-hi CSS
.view {bottom: 0 padding-top: 200px position: absolute text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { color: # 333 posició: alinear text absolut: centre superior: 50 px d'amplada: 100%} / * Colors de fons i text per a pàgines de visualització parcial (vista1, vista2, vista3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Per fer una transició neta entre diferents visualitzacions, establirem la propietat CSS-index
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Ara és hora de definir les nostres animacions
Animació de diapositives a l'esquerra
/ * lliscar cap a l'esquerra * / @keyframes slideOutLeft {a {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {a {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {a {-webkit-transform: translateX (-100%)}}Animació a escala
/ * scale up * / @keyframes scaleUp {from {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {from {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- fotogrames clau scaleUp {from {opacity: 0.3 -webkit-transform: scale (0.8)}}Feu lliscar des de l'animació dreta
/ * llisca des de la dreta * / @keyframes slideInRight {de {transform: translateX (100%)} a {transform: translateX (0)}} @ -moz-keyframes slideInRight {de {-moz-transform: translateX (100 %)} a {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {de {-webkit-transform: translateX (100%)} a {-webkit-transform: translateX (0)}}Feu lliscar des de l'animació inferior
/ * lliscar des de la part inferior * / @keyframes slideInUp {de {transform: translateY (100%)} a {transform: translateY (0)}} @ -moz-keyframes slideInUp {de {-moz-transform: translateY (100) %)} a {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {de {-webkit-transform: translateY (100%)} a {-webkit-transform: translateY (0)}}Gira i cau animació
/ * rotate and fall * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: facilitat- fora} 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: ease-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) animation-timing-function: ease-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17 graus)}}Gireu l'animació de diaris
/ * rotate out newspaper * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}}Aplicació d'animacions:
És hora d’aplicar les animacions que havíem definit abans
Veure 1 animacions
/ * Visualitzeu 1 animacions per deixar la pàgina i introduïu * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s ambdues facilitat -moz-animació: slideOutLeft 0.5s ambdues amb facilitat d’animació: slideOutLeft 0.5s ambdues facilitat -in} .view1.ng-enter {-webkit-animation: scaleUp 0,5s ambdues facilitat -moz-animation: scaleUp 0,5s ambdues facilitat-in animació: scaleUp 0,5s ambdues facilitat}Veure 2 animacions
/ * Visualitzeu 2 animacions per deixar la pàgina i introduïu * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotate Fall 1s ambdues facilitat -moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s both easy-in transform-origin: 0% 0% animation: rotateFall 1s both ease-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s both easy-in - animació moz: slideInRight 0.5s ambdues animacions de facilitat: slideInRight 0.5s ambdues facilitat}Veure 3 animacions
/ * Visualitzeu 3 animacions per deixar la pàgina i introduïu * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s ambdues facilitat -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s ambdues facilitat de transformació-origen: 50% 50% animació: rotateOutNewspaper .5s ambdues facilitat} .view3.ng-enter {-webkit-animation: slideInUp 0.5s ambdues facilitat -in -moz-animation: slideInUp 0.5s ambdues facilitat d'animació: slideInUp 0.5s ambdues facilitat}Hem acabat amb tots els canvis. Ara és hora d’executar l’aplicació
Execució de l'aplicació
què es serialitza a Java
En executar l'aplicació, se us mostrarà la pàgina següent:
Feu clic als enllaços i veureu animacions en joc, en entrar i sortir de les pàgines parcials.
Hi ha diverses altres animacions que es poden utilitzar. A més, aquí es pot trobar un conjunt aclaparador de possibles efectes: http://tympanus.net/Development/PageTransitions/
Baixeu-vos el codi i proveu-ho vosaltres mateixos
[buttonleads form_title = 'Codi de descàrrega' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Codi de descàrrega']
Espero que us hagi agradat l’anterior animació amb el bloc ngAnimate. Si voleu aprofundir en Angular JS, us recomanaria per què no feu una ullada a la nostra pàgina del curs. La formació Angular JS Certification d’Edureka us convertirà en un expert en Angular JS mitjançant sessions dirigides per instructors en directe i formació pràctica mitjançant casos d’ús reals.
Tens alguna pregunta? Esmenta’l a la secció de comentaris i et respondrem.
Articles Relacionats:
Analitzant fitxers XML mitjançant SAX Parser