Animating AngularJS Apps na may ngAnimate

Ipapaliwanag ng blog na ito kung paano gamitin ang sikat na ngAnimate upang magdagdag ng mga paglipat / pahina ng mga pahina sa mga anggular na panonood ibig sabihin kung paano lumikha ng animasyon gamit ang ngAnimate

AngularJS ay isang superheroic na balangkas ng JavaScript na ginagawang napakadali sa paglikha ng Mga Pahina ng Aplikasyon (SPA). Sa tuktok ng na AngularJS ay may isang maliit na bilang ng mga anggular modules na maaaring magamit upang lumikha ng isang kahanga-hangang karanasan ng gumagamit. Sa post na ito makikita namin kung paano gamitin ang sikat na ngAnimate upang magdagdag ng mga paglipat / mga animasyon ng pahina sa mga anggular na tanawin.



Maaaring magamit ang ngAnimate na may iba't ibang mga direktiba tulad ng ngRepeat, ngView, ngInclude, ngIf, ngMessage atbp.



Sa post na ito gagamitin namin ang mga animasyon na may ngView

Narito ginagamit namin ang Brackets IDE mula sa Adobe, ngunit malaya kang gumamit ng iba, halimbawa, Sublime Text, WebStorm mula sa JetBrains atbp.



Tandaan: Gagamitin din namin ang Bootswatch Bootstrap API upang bigyan ang aming mga pahina ng HTML ng magandang hitsura

Istraktura ng Proyekto:

Nasa ibaba ang istraktura ng proyekto sa Brackets IDE



ngAnimate-angularjs-project-structure

ruby sa riles ng tutorial sa website

Narito ang maikling paglalarawan ng bawat file na ginamit sa proyekto

animasyon.css - pangunahing CSS file kung saan tinukoy namin ang aming mga animasyon sa pahina

bootstrap.min.css - bootswatch bootstrap para sa pagbibigay ng aming mga tag ang magandang hitsura

config.js - pangunahing file ng JavaScript kung saan tinutukoy namin ang aming angular module kasama ang mga ruta at Controller

shellPage.html - Ito ang pahina ng shell kung saan ang iba pang mga panonood ay mai-load nang pabagu-bago

view1.html, view2.html, view3.html - Ito ang mga bahagyang pagtingin na mai-load sa shellPage

Paano inilalapat ang mga animasyon:

Nalalapat ng ngAnimate ang mga klase ng CSS sa iba't ibang mga direktiba ng Angular depende sa kung pumapasok sila o umaalis sa view

.ng-enter - Nalalapat ang klase ng CSS na ito sa direktiba tuwing nai-load ito sa pahina

.ng-leave - Nalalapat ang klase ng CSS na ito sa direktiba tuwing aalis ito sa pahina

Isa-isahin natin ang bawat file

shellPage.html

Naglo-load ang shellPage ng kinakailangang mga mapagkukunan, naglalapat ng-app sa katawan at nagdaragdag ng-view upang ma-injection ang mga view nang pabago-bago.

  

config.js

Sa config file, tinutukoy namin ang aming angular module kasama ang mga ruta at Controller.

Ang paglipat ng module ay mayroong dalawang dependency: ngAnimate at ngRoute

var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (function ($ rutaProvider) {$ rutaProvider .when ('/', {templateUrl: 'partials / view1.html' , controller: 'view1Controller'}) .kapag ('/ view2', {templateUrl: 'mga partial / view2.html', controller: 'view2Controller'}) .kapag ('/ view3', {templateUrl: 'mga partial / view3. html ', controller:' view3Controller '})}) transitionApp.controller (' view1Controller ', function ($ saklaw) {$ saklaw.cssClass =' ​​view1 '}) transitionApp.controller (' view2Controller ', function ($ saklaw) { $ saklaw.cssClass = 'view2'}) transitionApp.controller ('view3Controller', pagpapaandar ($ saklaw) {$ saklaw.cssClass = 'view3'})

Natukoy namin ang tatlong bahagyang mga panonood (view1, view2, view3) na ituturok sa shellpage depende sa URL. Nagtatakda ang Mga Gumagalang Controller ng isang katangian ng cssClass, na kung saan ay ang pangalan ng klase ng CSS, na mailalapat sa ng-view. Tutukuyin namin ang aming mga animasyon sa mga klase sa CSS na mai-load ang bawat pahina ng iba't ibang mga animasyon.

Mga bahagyang pahina ng view1.html, view2.html, view3.html

Walang anuman sa mga bahagyang pahina, ilang teksto lamang at naka-link sa iba pang mga pagtingin

view1.html

Ito ang View 1

Tingnan ang 2 Tingnan ang 3

view2.html

Ito ang View 2

Tingnan ang 1 Tingnan ang 3

view3.html

Ito ang View 3

Tingnan ang 1 Tingnan ang 2

Tandaan na ang tatlong mga HTML file na ito ay bahagyang mga pahina na kung saan ay mai-injected sa shellPage.html alinsunod sa URL na tinukoy namin sa config.js file

Pagtukoy sa Mga Estilo at Animasyon:

Ilagay natin ang ilang buhay sa aming mga pananaw sa pamamagitan ng paglalapat ng CSS dito

.view {ilalim: 0 padding-top: 200px posisyon: absolute text-align: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { kulay: # 333 posisyon: ganap na text-align: tuktok ng tuktok: 50px lapad: 100%} / * Mga kulay ng background at teksto para sa mga bahagyang pahina ng pagtingin (view1, view2, view3) ------------- ------------ ------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}

Upang makagawa ng isang malinis na paglipat sa pagitan ng iba't ibang mga panonood, itatakda namin ang pag-aari ng CSS z-index

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

Oras na upang tukuyin ang aming mga animasyon

Slide Left Animation

/ * slide out left * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}

Scale Up Animation

/ * scale up * / @keyframes scaleUp {mula sa {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {mula sa {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- keyframes scaleUp {mula sa {opacity: 0.3 -webkit-transform: scale (0.8)}}

Slide In mula sa Tamang Animation

ay isang postgraduate na master
/ * slide in mula sa kanan * / @keyframes slideInRight {mula sa {transform: translateX (100%)} hanggang sa {transform: translateX (0)}} @ -moz-keyframes slideInRight {mula sa {-moz-transform: translateX (100 %)} sa {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {mula sa {-webkit-transform: translateX (100%)} hanggang sa {-webkit-transform: translateX (0)}}

Slide In mula sa Ibabang Animasyon

/ * slide in mula sa ilalim * / @keyframes slideInUp {mula sa {transform: translateY (100%)} hanggang sa {transform: translateY (0)}} @ -moz-keyframes slideInUp {mula sa {-moz-transform: translateY (100 %)} sa {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {mula sa {-webkit-transform: translateY (100%)} hanggang sa {-webkit-transform: translateY (0)}}

Paikutin at Mahulog na Animasyon

/ * paikutin at mahulog * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: madali- 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% {transform: rotateZ (10deg) animation-timing-function: ease-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotateZ (17deg)}}

Paikutin ang Animasyon ng Pahayagan

/ * paikutin ang pahayagan * / @ -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}}

Paglalapat ng Mga Animasyon:

Panahon na upang ilapat ang mga animasyon na tinukoy namin dati

Tingnan ang 1 Mga Animasyon

/ * Tingnan ang 1 mga animasyon para sa pag-iwan ng pahina at ipasok ang * / .view1.ng-iwan {-webkit-animation: slideOutLeft 0.5s parehong kadalian-in -moz-animation: slideOutLeft 0.5s parehong kadaliang mag-animasyon: slideOutLeft 0.5s parehong kadalian -in} .view1.ng-ipasok ang {-webkit-animation: scaleUp 0.5s parehong kadalian-in -moz-animasyon: scaleUp 0.5s parehong kadali-sa animasyon: scaleUp 0.5s parehong kadalian-in}

Tingnan ang 2 Mga Animasyon

/ * Tingnan ang 2 mga animasyon para sa pag-iwan ng pahina at ipasok ang * / .view2.ng-iwan {-webkit-transform-pinagmulan: 0% 0% -webkit-animation: paikutinFall 1s parehong kadalian-in -moz-transform-pinagmulan: 0% 0% -moz-animation: paikutinFall 1s parehong kadalian-sa pagbabago-pinagmulan: 0% 0% na animasyon: paikutin ang 1 na parehong kadalian-in} .view2.ng-enter {-webkit-animasyon: slideInRight 0.5s parehong kadalian-in - moz-animation: slideInRight 0.5s parehong kadalian-sa animasyon: slideInRight 0.5s parehong kadalian-in}

Tingnan ang 3 Mga Animasyon

/ * Tingnan ang 3 mga animasyon para sa pag-iwan ng pahina at ipasok ang * / .view3.ng-iwan {-webkit-transform-pinagmulan: 50% 50% -webkit-animasyon: paikutinOutNewspaper .5 parehong kapwa madali-sa -moz-transform-pinagmulan: 50 % 50% -moz-animation: rotateOutNewspaper .5s parehong kadalian-in transform-pinagmulan: 50% 50% na animasyon: rotateOutNewspaper .5s parehong kadalian-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s parehong kadalian -in -moz-animation: slideInUp 0.5s parehong kadali-sa animasyon: slideInUp 0.5s parehong kadalian-in}

Tapos na tayo sa lahat ng mga pagbabago. Ngayon ay oras na upang patakbuhin ang application

Pagpapatakbo ng Application

Sa pagpapatakbo ng application, ipapakita sa iyo ang pahina sa ibaba:

Mag-click sa mga link at makikita mo ang mga animasyon na nilalaro, sa pagpasok at pag-iwan ng bahagyang mga pahina.

Mayroong iba't ibang mga ibang mga animasyon na maaaring magamit. Gayundin, ang isang napakalaki na hanay ng mga posibleng epekto ay maaaring maging dito: http://tympanus.net/Development/PageTransitions/

I-download ang code at subukan ito mismo

[buttonleads form_title = 'Code sa Pag-download' redirect_url = https: //edureka.wistia.com/ Medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = 'Download Code']

Sana nagustuhan mo ang nasa itaas na Animation na may ngAnimate blog. Kung nais mong malalim na sumisid sa Angular JS, inirerekumenda ko sa iyo kung bakit hindi tumingin sa aming pahina ng kurso. Ang pagsasanay sa Angular JS Certification sa Edureka ay gagawin kang dalubhasa sa Angular JS sa pamamagitan ng live na instruktor na humantong sa mga sesyon at pagsasanay na hands-on gamit ang mga kaso ng paggamit ng totoong buhay.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento at babalikan ka namin.

Mga Kaugnay na Post:

Pag-parse ng mga XML na file gamit ang SAX Parser