AngularJS on superkangelane JavaScripti raamistik, mis muudab ühe lehe rakenduste (SPA) loomise väga lihtsaks. Selle peale tuleb AngularJS koos käputäie nurgamoodulitega, mida saab kasutada vinge kasutuskogemuse loomiseks. Selles postituses näeme, kuidas kasutada populaarset ngAnimate'i lehtede üleminekute / animatsioonide lisamiseks nurkvaadetesse.
ngAnimate'i saab kasutada mitmesuguste direktiividega, nagu ngRepeat, ngView, ngInclude, ngIf, ngMessage jne.
Selles postituses kasutame ngView-ga animatsioone
Siin kasutame Adobe'i sulge IDE-d, kuid võite vabalt kasutada teisi, näiteks Sublime Text, JetBrains WebStorm jne.
Märge : Kasutame ka Bootswatch Bootstrap API-d, et anda oma HTML-lehtedele ilus välimus
Projekti struktuur:
Allpool on projekti struktuur sulgudes IDE
Siin on iga projektis kasutatud faili lühikirjeldus
animation.css - peamine CSS-fail, kus määratleme oma lehe animatsioonid
bootstrap.min.css - saapakella saaparihm meie andmiseks sildistab ilusa välimuse
config.js - peamine JavaScripti fail, kus määratleme oma nurgamooduli koos marsruutide ja kontrolleritega
shellPage.html - See on kestleht, kuhu muud vaated laaditakse dünaamiliselt
view1.html, view2.html, view3.html - Need on osalised vaated, mis laaditakse shellPage'i
Kuidas animatsioone rakendatakse:
ngAnimate rakendab CSS-i klasse erinevate nurgadirektiivide jaoks sõltuvalt sellest, kas nad sisenevad vaatesse või lahkuvad sellest
.ng-enter - See CSS-klass kehtib direktiivile alati, kui see lehele laaditakse
.ng-jäta - See CSS-klass kehtib direktiivile alati, kui see lehelt lahkub
Vaatame iga faili ükshaaval läbi
shellPage.html
shellPage laadib vajalikud ressursid, rakendab ng-rakenduse kehale ja lisab ng-vaate, et vaateid dünaamiliselt süstida.
config.js
Konfigureerimisfailis määratleme oma nurgamooduli koos marsruutide ja kontrolleritega.
kuidas püütonis string tagasi pöörata
Moodulil transferApp on kaks sõltuvust: ngAnimate ja ngRoute
var transitApp = nurk.moodul ('transferApp', ['ngAnimate', 'ngRoute']) pārejaApp.config (funktsioon ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'osalised / vaade1.html' , kontroller: 'view1Controller'})). kui ('/ view2', {templateUrl: 'partss / view2.html', kontroller: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partss / view3. html ', kontroller:' view3Controller '})}}) pārejaApp.controller (' view1Controller ', funktsioon ($ scope) {$ scope.cssClass =' view1 '}) pārejaApp.controller (' view2Controller ', function ($ scope) { $ scope.cssClass = 'view2'}) pārejaApp.controller ('view3Controller', funktsioon ($ scope) {$ scope.cssClass = 'view3'})Oleme määranud kolm osalist vaadet (vaade1, vaade2, vaade3), mis süstitakse shellilehele sõltuvalt URL-ist. Vastavad kontrollerid määravad atribuudi cssClass, mis on CSS-klassi nimi, mida rakendatakse n-vaates. Me määratleme oma animatsioonid nendes CSS-klassides, mis laadivad igale lehele erinevad animatsioonid.
Osalehed view1.html, view2.html, view3.html
Osalehtedel pole midagi palju, piisab tekstist ja linkidest teistele vaadetele
vaade1.html
See on vaade 1
Vaade 2 Vaade 3
view2.html
See on vaade 2
Vaade 1 Vaade 3
view3.html
See on vaade 3
Vaade 1 Vaade 2
Pidage meeles, et need kolm HTML-faili on osalised lehed, mis süstitakse shellPage.html-sse vastavalt URL-ile, mille oleme määranud failis config.js
Stiilide ja animatsioonide määratlemine:
Lisame CSS-i rakendades oma vaateid veidi elu
.view {bottom: 0 padding-top: 200px position: absoluutne teksti joondamine: center top: 0 width: 100%} .vaade {margin-top: 50px} .view h1 {font-size: 60px} #heading { värv: # 333 positsioon: absoluutne teksti joondamine: ülemine keskosa: 50px laius: 100%} / * osalise vaate lehtede tausta ja teksti värvid (vaade1, vaade2, vaade3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}Puhta ülemineku tegemiseks erinevate vaadete vahel määrame CSS z-indeksi atribuudi
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Nüüd on aeg määratleda meie animatsioonid
Slide Left Animation
/ * libistage vasakule * / @keyframes slideOutLeft {to {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {to {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {to {-webkit-transform: translateX (-100%)}}Suurenda animatsiooni
/ * suurendage üles * / @ võtmeraamid skaalaUp {alates {läbipaistmatus: 0,3 teisendus: skaala (0,8)}} @ -moz-võtmekaadrid skaalaUp {alates {läbipaistmatus: 0,3 -moz-teisendus: skaala (0,8)}} @ -webkit- võtmekaadrite skaalaUp {from {läbipaistmatus: 0,3 -webkit-transform: skaala (0,8)}}Parempoolsest animatsioonist libistage sisse
c ++ tüüpi teisendamine
/ * libistage sisse paremalt * / @keyframes slideInRight {from {transform: translateX (100%)} - {transform: translateX (0)}} @ -moz-keyframes slideInRight {from {-moz-transform: translateX (100 %)} - {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {from {-webkit-transform: translateX (100%)} - {-webkit-transform: translateX (0)}}Libistage alt animatsioonist sisse
/ * libistage alt üles * / @keyframes slideInUp {from {transform: translateY (100%)} - {transform: translateY (0)}} @ -moz-keyframes slideInUp {from {-moz-transform: translateY (100 %)} - {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {from {-webkit-transform: translateY (100%)} - {-webkit-transform: translateY (0)}}Animatsiooni pööramine ja langemine
/ * pöörata ja kukkuda * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: easy- välja} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -võtmeraamid 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) animatsiooni ajastusfunktsioon: hõlbustus-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) pöörataZ (17deg)}}Pöörake ajalehe animatsioon välja
/ * pöörake ajaleht välja * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) läbipaistmatus: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) läbipaistmatus: 0}} @ keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) läbipaistmatus: 0}}Animatsioonide rakendamine:
On aeg rakendada animatsioone, mille olime varem määratlenud
Kuva 1 animatsiooni
/ * Vaadake 1 animatsiooni lehe lahkumiseks ja sisestage * / .view1.ng-leave {-webkit-animation: slideOutLeft 0,5s mõlemad hõlpsasti -moz-animatsioon: slideOutLeft 0,5s mõlemad hõlpsalt-sisse animeeritud: slideOutLeft 0,5s mõlemad hõlbustavad -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s mõlemad hõlpsasti -moz-animation: scaleUp 0.5s mõlemad animatsioon: scaleUp 0.5s mõlemad easy-in}Kuva 2 animatsiooni
/ * Vaadake 2 animatsiooni lehepuhkuse jaoks ja sisestage * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotateFall 1s mõlemad-in-moz-transform-origin: 0% 0% -moz-animation: rotateFall 1s mõlemad hõlpsasti teisendatavad-päritolu: 0% 0% animation: rotateFall 1s mõlemad easy-in} .view2.ng-enter {-webkit-animation: slideInRight 0.5s mõlemad hõlbustatavad - moz-animatsioon: slideInRight 0.5s mõlemad hõlpsalt sissetõmmatavad animatsioonid: slideInRight 0.5s mõlemad hõlpsalt sisselülitatavad}Kuva 3 animatsiooni
/ * Vaadake lehe lahkumiseks 3 animatsiooni ja sisestage * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s mõlemad-in -moz-transform-origin: 50 % 50% -moz-animation: rotateOutNewspaper .5s mõlemad hõlbustavad-muundamise-päritolu: 50% 50% animation: rotateOutNewspaper .5s mõlemad-hõlbustavad-in} .view3.ng-enter {-webkit-animation: slideInUp 0.5s mõlemad hõlbustavad -in -moz-animation: slideInUp 0,5 s mõlemad hõlpsalt sisselülitatavad animatsioonid: slideInUp 0,5 s mõlemad lihtsustavad-in}Kõik muudatused on meil tehtud. Nüüd on aeg rakendus käivitada
Rakenduse käitamine
Rakenduse käivitamisel kuvatakse teile järgmine leht:
Kui klõpsate linkidel, näete animatsioone osaliste lehtede sisestamisel ja lahkumisel.
Kasutada saab veel mitmeid animatsioone. Samuti võib siin olla valdav hulk võimalikke mõjusid: http://tympanus.net/Development/PageTransitions/
Laadige kood alla ja proovige seda ise
[buttonleads form_title = ”Laadi kood alla” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Koodi allalaadimine”]
Loodan, et teile meeldis ülaltoodud animatsioon koos ngAnimate'i ajaveebiga. Kui soovite Angular JSi sukelduda, soovitaksin teil meie pilku vaadata kursuse leht. Edurekas toimuv Angular JS-i sertifitseerimiskoolitus muudab teid nurga-JS-i eksperdiks reaalajas kasutatavate juhendajate juhendatud sessioonide ja praktiliste koolituste kaudu.
Kas teil on meile küsimus? Palun mainige seda kommentaaride jaotises ja võtame teiega ühendust.
Seonduvad postitused:
XML-failide sõelumine SAX-parseri abil