Animació d'aplicacions AngularJS amb ngAnimate

Aquest bloc explicarà com utilitzar el popular ngAnimate per afegir transicions de pàgina / animacions a vistes angulars, és a dir, com crear animacions amb ngAnimate

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



ngAnimate-angularjs-project-structure

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