Share
Når det brukes riktig, kan animasjoner gjøre et webprogram morsomt å bruke. Moderne nettlesere kan animere ulike elementer på en nettside ved å bruke bare CSS. Hvis du bruker AngularJS i et av prosjektene dine, kan du også bruke ngAnimate-modulen til å legge til animasjon på den på den kantede måten.
Med ngAnimate-modulen kan du legge til CSS samt JavaScript-baserte animasjoner til prosjektene dine. CSS-baserte animasjoner inkluderer nøkkelrammer og overganger. De JavaScript-baserte animasjonene må registreres ved hjelp av module.animation (). I denne opplæringen lærer du hvordan du legger til CSS-animasjoner til innebygde animasjonsbevisste AngularJS-direktiver for å gjøre appene dine mer tiltalende.
Det første du må gjøre for å legge til animasjoner er, inkluderer vinkel-animate.js i prosjektet ditt. Når du er ferdig, kan du inkludere ngAnimate-modulen som en avhengighet i appen din for å begynne å animere forskjellige elementer.
Accentsconagua
angular.module ('app', ['ngAnimate']);Her er en liste over forskjellige animasjonsbevisste direktiver og animasjonshendelsene som du kan bruke til å animere dem:
ng-repeat kan oppdage Tast inn, permisjon og bevege seg arrangementer.ng-syn, ng-inkludere, ng-bryter og ng-hvis kan oppdage Tast inn og permisjon arrangementer.ng-vis, ng-hide og ng-klasse kan oppdage Legg til og fjerne arrangementer.ng-meldingen kan også oppdage Tast inn og permisjon arrangementer.Du bør huske at disse animasjonshakene ikke er aktivert som standard; de blir bare aktive når du legger til ngAnimate-modulen i appen din.
Ng-if-direktivet i AngularJS brukes til å legge til eller fjerne elementer fra DOM basert på verdien av et gitt uttrykk. Når uttrykket evalueres til falsk, elementet er fjernet fra DOM. Når uttrykket evalueres til ekte, en klon av elementet blir satt inn i DOM. Denne tillegg og fjerning av elementer er øyeblikkelig. Du kan imidlertid animere elementene som blir fjernet eller gjenopprettet ved hjelp av ngAnimate-modulen.
Hvis elementene legges til DOM, kan du bruke ng-skriv og ng-enter-aktive klasser å animere dem. Overgangskoden og start animasjonsstatus legges til i ng-skriv klasse. Den endelige animasjonsstaten legges til i ng-enter-aktive klasse. Her er koden for å vise noen røde streker ved å animere høyden.
.red-bar.ng-enter overgang: all let-in 0.25s; høyde: 0px; .red-bar.ng-enter.ng-enter-aktiv høyde: 30px;
På samme måte kan du også bruke en animasjon for å skjule barene ved hjelp av ng-forlate og ng-leave-aktive klasser. Jeg har slått ut animasjonen for å fjerne de røde stolpene, slik at du tydelig kan se forskjellen mellom animerte og ikke-animerte stater.
Direktivet ng-visning i AngularJS brukes som en beholder for å laste inn en del av siden når brukeren bytter mellom forskjellige visninger.
Akkurat som tillegg og fjerning av elementer som bruker ng-hvis, denne prosessen skjer også veldig raskt. Hvis du vil animere inn- og utreise av forskjellige elementer i visningen, kan du bruke det samme gamle ng-skriv, ng-enter-aktive, ng-forlate, og ng-leave-aktive klasser.
Foruten disse fire klassene er det også en ng-animere klasse. I løpet av animasjonen blir denne klassen også lagt til alle elementene som må animeres. Du kan bruke den til å gi alle CSS-reglene som må gjelde i løpet av animasjonen. Her er et eksempel:
.planet-view.ng-animere overgang: all ease 0.4s; posisjon: absolutt; .planet-view.ng-enter toppen: 200px; opasitet: 0; .planet-view.ng-leave, .planet-view.ng-enter.ng-enter-aktiv topp: 0; opasitet: 1; .planet-view.ng-leave.ng-leave-active toppen: -200px; opasitet: 0;
Som du kan se i koden ovenfor, har en overgangsperiode på 0,4 sekunder blitt brukt på alle egenskapene. Når informasjonen for en bestemt planet kommer inn i visningen, begynner den med en opasitet på null og topp posisjon satt til 200px. Samtidig har elementene som skal forlate visningen en opasitet på 1.
Ved slutten av overgangen kommer de inngående elementene til toppposisjonen av visningen og blir helt ugjennomsiktig. På samme måte anslår de forlatende elementene en posisjon 200px over visningen og visner bort. Dette gir oss en fin effekt der informasjonen ser ut til å falme inn fra bunnen av siden og fade ut øverst på siden.
I de neste ng-syn demo, prøv å klikke på navnet på forskjellige planeter for å se Tast inn og permisjon animasjoner i aksjon.
Informasjonen om den atmosfæriske sammensetningen av jordbaserte planeter er tatt fra denne siden.
Ng-gjenta direktivet i AngularJS brukes til å instantiere en mal en gang per element i en gitt samling. Dette direktivet brukes når du prøver å sortere, filtrere, legge til eller fjerne elementer fra en samling. Det er tre animasjonsbegivenheter som kan utløses med ng-repeat.
I de to siste seksjonene har du brukt CSS-overganger til å animere forskjellige elementer. I denne delen lærer du hvordan du animerer forskjellige elementer ved hjelp av keyframe-animasjon. Jeg vil gi koden for både overgangen og keyframe-animasjonen slik at du kan se forskjellen mellom de to.
Her er overgangskoden for å animere elementene:
.task-item.ng-enter, .task-item.ng-leave overgang: alle lineære 0.25s; .task-item.ng-leave topp: 0; opasitet: 1; .task-item.ng-leave.ng-leave-active toppen: 200px; opasitet: 0; .task-item.ng-enter opacity: 0; topp: -500px; .task-item.ng-enter.ng-enter-aktiv opacity: 1; topp: 0px;
Som du kan se, er denne koden svært lik overgangskoden som vi har brukt opp til dette punktet. Utgangsstaten er definert i ng-skriv og ng-forlate. Sluttstaten er definert i ng-enter-aktive og ng-leave-aktive.
Følgende kode gjenoppretter samme effekt ved hjelp av keyframe-animasjoner.
@keyframes lagt til fra opacity: 0; topp: -500px; til opacity: 1; topp: 0px; @keyframes slettet fra topp: 0; opasitet: 1; til toppen: 200px; opasitet: 0; .task-item.ng-enter animasjon: 0.25s lagt til; .task-item.ng-leave animasjon: 0.25s slettet;
Denne gangen bruker vi CSS animasjon egenskap for å legge til animasjonen. Den faktiske animasjonen er definert ved hjelp av @keyframes. Den opprinnelige og endelige tilstanden til forskjellige elementer er definert i keyframene selv. Vær oppmerksom på at vi ikke trenger å bruke ng-enter-aktive og ng-leave-aktive klasser lenger. En fordel ved å bruke keyframes er at animasjonen nå kan bli mye mer komplisert enn en enkel overgang.
Prøv å legge til og slette noen oppgaver i følgende demo for å se animasjonen i aksjon.
Envato Tuts + har også publisert en veiledning om validering av skjemaene dine ved hjelp av ngMessages. I den siste delen av den opplæringen lærte du hvordan du bare viser feilmeldinger etter at en bruker faktisk har rørt et inntastingsfelt. Alle feilmeldingene i den opplæringen vises og forsvinner umiddelbart.
Hvis du vil legge til en subtil animasjon for å vise eller skjule feilmeldingene, kan du gjøre det enkelt med ngAnimate-modulen. Som nevnt i begynnelsen av denne opplæringen, ng-meldingen kan oppdage Tast inn og permisjon arrangementer. Dette betyr at du kan bruke ng-skriv og ng-enter-aktive klasser for å spesifisere den første og endelige tilstanden til feilmeldinger som nå vises til brukerne. På samme måte kan du bruke ng-forlate og ng-leave-aktive klasser for å angi den første og endelige tilstanden til feilmeldinger som er i ferd med å bli skjult fra brukerne.
Her er et eksempel på å endre opacitetsegenskapen for feilmeldinger.
.error-msg.ng-enter overgang: 0,5s lineær alle; opasitet: 0; .error-msg.ng-enter.ng-enter-aktiv opacity: 1;
Jeg har lagt til en error-msg klasse til alle feilmeldingene, og du kan legge til dine egne klasser og oppdatere koden tilsvarende. I dette tilfellet har jeg ikke brukt noen animasjon av feilmeldinger som har blitt ugyldige og ikke lenger skal vises til brukere. Dette betyr at de vil forsvinne umiddelbart. Her er den demo som viser hvordan man bruker ngMessages og ngAnimate sammen.
Denne opplæringen lærte deg hvordan du legger til animasjon i AngularJS-nettappsene dine ved hjelp av ngAnimate-modulen. Du lærte også hvordan du bruker forskjellige animasjoner til et element basert på utløserhendelsen. Den siste delen dekket hvordan du bruker ngAnimate-modulen med andre moduler som ngMessages for å legge til fine animasjoner til feilmeldinger.
En ting du må huske på når du bruker animasjoner, er at du ikke bør overtale dem. For mange animasjoner kan distrahere brukerne fra hovedfunksjonen til appen. Bruk bare animasjoner når du tror at de faktisk kan forbedre brukeropplevelsen.
Jeg håper du likte denne opplæringen. Hvis du har noen tips, forslag eller spørsmål relatert til ngAnimate-modulen, vennligst kommenter.
