AngularJS er et superhelte JavaScript-rammeverk som gjør det enkelt å lage SPA (Single Page Applications). På toppen av det kommer AngularJS med en håndfull vinkelmoduler som kan brukes til å skape en fantastisk brukeropplevelse. I dette innlegget skal vi se hvordan du bruker populær ngAnimate for å legge til sideoverganger / animasjoner i vinkelvisninger.
ngAnimate kan brukes med forskjellige direktiver som ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.
I dette innlegget vil vi bruke animasjoner med ngView
Her bruker vi Brackets IDE fra Adobe, men du er fri til å bruke andre, for eksempel Sublime Text, WebStorm fra JetBrains etc.
Merk : Vi vil også bruke Bootswatch Bootstrap API for å gi HTML-sidene våre et vakkert utseende
lese og skrive excel-fil i java
Prosjektstruktur:
Nedenfor er prosjektstrukturen i Brackets IDE
Her er den korte beskrivelsen av hver fil som brukes i prosjektet
animasjon.css - hoved CSS-fil der vi definerer sideanimasjonene våre
bootstrap.min.css - bootswatch bootstrap for å gi vår merker et vakkert utseende
config.js - hoved JavaScript-fil der vi definerer vinkelmodulen vår sammen med ruter og kontrollere
shellPage.html - Dette er skallsiden der andre visninger vil bli lastet dynamisk
view1.html, view2.html, view3.html - Dette er de delvise visningene som blir lastet inn i shellPage
Hvordan brukes animasjoner:
ngAnimate bruker CSS-klasser på forskjellige vinkelretningslinjer, avhengig av om de går inn eller ut av visningen
.ng-enter - Denne CSS-klassen gjelder i direktivet når den blir lastet inn på siden
.ng-permisjon - Denne CSS-klassen gjelder i direktivet når den forlater siden
La oss gå gjennom hver fil en etter en
shellPage.html
shellPage laster de nødvendige ressursene, bruker ng-app til kroppen og legger til ng-view for å injisere visningene dynamisk.
config.js
I konfigurasjonsfil definerer vi vinkelmodulen vår sammen med ruter og kontrollere.
Module transitionApp har to avhengigheter: ngAnimate og ngRoute
var transitionApp = angular.module ('transitionApp', ['ngAnimate', 'ngRoute']) transitionApp.config (function ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , controller: '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', funksjon ($ scope) {$ scope.cssClass = 'view3'})Vi har definert tre delvisninger (visning1, visning2, visning3) som vil bli injisert i skallsiden, avhengig av URL. Respective Controllers angir et cssClass-attributt, som er navnet på CSS-klassen, som vil bli brukt på ng-view. Vi vil definere animasjonene våre i disse CSS-klassene som vil laste hver side med forskjellige animasjoner.
Delvise sider view1.html, view2.html, view3.html
Det er ikke mye i delsider, bare litt tekst og lenke til andre visninger
visning1.html
Dette er visning 1
Visning 2 Visning 3
view2.html
Dette er Visning 2
Visning 1 Visning 3
view3.html
Dette er visning 3
Visning 1 Visning 2
Husk at disse tre HTML-filene er delsider som vil bli injisert i shellPage.html i henhold til URL-en som vi har definert i config.js-filen
Definere stiler og animasjoner:
La oss sette litt liv i våre synspunkter ved å bruke CSS på det
.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 { farge: # 333 posisjon: absolutt tekstjustering: midt på toppen: 50 px bredde: 100%} / * Bakgrunns- og tekstfarger for sider med delvis visning (visning1, visning2, visning3) ------------- ------------------------------------------------ * / .view1 {bakgrunn: # bef2de farge: # 00907c} .view2 {bakgrunn: # D4D0EA farge: # 55316f} .view3 {bakgrunn: # FFCBA4 farge: rgba (149, 95, 40, 0.91)}For å gjøre en ren overgang mellom forskjellige visninger, vil vi sette CSS z-indeksegenskapen
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}Nå er det på tide å definere animasjonene våre
Skyv venstre animasjon
/ * skyv ut til venstre * / @keyframes slideOutLeft {til {transform: translateX (-100%)}} @ -moz-keyframes slideOutLeft {til {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {til {-webkit-transform: translateX (-100%)}}Skaler opp animasjon
/ * skalere opp * / @keyframes scaleUp {fra {opacity: 0.3 transform: scale (0.8)}} @ -moz-keyframes scaleUp {from {opacity: 0.3 -moz-transform: scale (0.8)}} @ -webkit- keyframes scaleUp {fra {opacity: 0.3 -webkit-transform: scale (0.8)}}Skyv inn fra høyre animasjon
/ * skyv inn fra høyre * / @keyframes slideInRight {fra {transform: translateX (100%)} til {transform: translateX (0)}} @ -moz-keyframes slideInRight {fra {-moz-transform: translateX (100 %)} til {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {fra {-webkit-transform: translateX (100%)} til {-webkit-transform: translateX (0)}}Skyv inn fra bunn animasjon
/ * skyv inn fra bunnen * / @keyframes slideInUp {fra {transform: translateY (100%)} til {transform: translateY (0)}} @ -moz-keyframes slideInUp {fra {-moz-transform: translateY (100 %)} til {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {fra {-webkit-transform: translateY (100%)} til {-webkit-transform: translateY (0)}}Roter og fall animasjon
/ * rotere og falle * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: ease- ut} 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 (17deg)}}Roter avisanimasjon
/ * roter avis * / @ -webkit-keyframes rotateOutNewspaper {til {-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}}Bruke animasjoner:
Det er på tide å bruke animasjonene vi hadde definert tidligere
Vis 1 animasjoner
/ * Se 1 animasjoner for sideutgang og skriv inn * / .view1.ng-leave {-webkit-animation: slideOutLeft 0.5s begge letthet i -moz-animasjon: slideOutLeft 0.5s begge let-in animasjon: slideOutLeft 0.5s begge lette -in} .view1.ng-enter {-webkit-animation: scaleUp 0.5s both ease-in -moz-animation: scaleUp 0.5s both ease-in animation: scaleUp 0.5s both ease-in}Vis 2 animasjoner
/ * Se 2 animasjoner for sideløft og skriv inn * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animation: rotate Fall 1s begge er enkle i -moz-transform-origin: 0% 0% -moz-animasjon: rotateFall 1s begge forenkler transform-origin: 0% 0% animasjon: rotateFall 1s begge forenkler} .view2.ng-enter {-webkit-animation: slideInRight 0.5s begge gjør det enkelt - moz-animasjon: slideInRight 0.5s begge letthets-animasjon: slideInRight 0.5s begge lette-in}Vis 3 animasjoner
/ * Se på 3 animasjoner for sidelatring og skriv inn * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animation: rotateOutNewspaper .5s begge er enkle å -moz-transform-origin: 50 % 50% -moz-animasjon: rotateOutNewspaper .5s begge forenkler transform-origin: 50% 50% animasjon: rotateOutNewspaper .5s begge forenkler} .view3.ng-enter {-webkit-animation: slideInUp 0.5s begge forenkler -in -moz-animasjon: slideInUp 0.5s begge animasjon: slideInUp 0.5s begge lett-in}Vi er ferdige med alle endringene. Nå er det på tide å kjøre applikasjonen
Kjører applikasjonen
Når du kjører applikasjonen, vil du bli presentert med siden nedenfor:
Klikk på lenkene for å se animasjoner som spilles, når du går inn og forlater delsidene.
Det er forskjellige andre animasjoner som kan brukes. Et overveldende sett med mulige effekter kan også være her: http://tympanus.net/Development/PageTransitions/
Last ned koden og prøv den selv
[buttonleads form_title = ”Last ned kode” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Last ned kode”]
sorter () c ++
Jeg håper du likte animasjonen over med ngAnimate-bloggen. Hvis du ønsker å dykke ned i Angular JS, vil jeg anbefale deg hvorfor ikke ta en titt på vår kurs side. Angular JS-sertifiseringstrening på Edureka vil gjøre deg til en ekspert på Angular JS gjennom live instruktørledede økter og praktisk trening ved bruk av virkelige brukssaker.
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet, så kommer vi tilbake til deg.
Relaterte innlegg:
Analyse av XML-filer ved bruk av SAX Parser