Native-Som Animasjoner for Side Overganger på Nettet

0
24

Noen av de mest inspirerende eksempler jeg har sett av front-end utvikling har involvert en slags side overganger som ser lekker ut, som de gjør i mobile apper. Men, selv om fantasi for disse typer interaksjoner synes å florerer, sin tilstedeværelse på faktiske nettsteder som jeg besøker ikke. Det finnes en rekke måter for å oppnå disse typer bevegelse!

Her er hva vi vil bygge:

Demo Side

GitHub-Repo

Vi vil bygge ut den enkleste mulige distallation av disse begrepene, slik at du kan bruke dem til noe program, og så vil jeg også gi koden for dette mer komplekse app hvis du ønsker å dykke i.

I dag vil vi diskutere hvordan du kan lage dem med Vue og Nuxt. Det er mange bevegelige deler i side overganger og animasjoner (lol jeg drepe meg), men ikke bekymre deg! Noe vi ikke har tid til å dekke i denne artikkelen, vi vil koblingen av å med andre ressurser.

Hvorfor?

Nettet har kommet under kritikk i de siste årene for å vises “datert” i forhold til å native iOS-og Android-app erfaringer. Overgangen mellom de to statene kan redusere den kognitive belastningen for brukeren, som når noen er skanne en side, de har for å skape et mentalt kart av alt som finnes på den. Når vi beveger oss fra side til side, brukeren har til å være igjen at hele plassen. Hvis et element er gjentatt på flere sider, men endret litt, det etterligner den erfaringen vi har vært biologisk opplært til å forvente — ingen dukker bare inn i et rom eller endringer plutselig; de overgang fra et annet rom i denne. Dine øyne ser noen som er mindre i forhold til deg. Da de kom nærmere i nærhet til deg, får de større og større. Uten disse overganger, endringer kan være oppsiktsvekkende. De tvinge brukeren til å være igjen plassering og til og med deres forståelse av samme element. Det er av denne grunn at disse effektene bli avgjørende i en opplevelse som hjelper brukeren til å føle seg hjemme og samle informasjon raskt på nettet.

Den gode nyheten er, å implementere disse typer overganger er helt gjennomførbart. La oss grave litt i!

Forutsetning Kunnskap

Hvis du er ukjent med Nuxt og hvordan å jobbe med det for å skape Vue.js programmer, det er en annen artikkel jeg skrev om emnet her. Hvis du er kjent med og Reagere Next.js, Nuxt.js er Vue tilsvarende. Det tilbyr server-side rendering, kode splitting, og viktigst av alt, kroker for side overganger. Selv om siden overgangen kroker her tilbys er gode, og det er ikke hvordan vi kommer til å utføre mesteparten av våre animasjoner i denne opplæringen.

For å forstå hvordan de overgangene vi jobber med i dag gjøre arbeidet, trenger du også å ha grunnleggende kunnskap rundt <overgang / > – komponent, og forskjellen mellom CSS-animasjoner og overganger. Jeg har dekket både i mer detalj her. Du må også ha grunnleggende kunnskap om <overgang-gruppe / > – komponent, og dette Snipcart innlegget er en stor ressurs for å lære mer om det.

Selv om du vil forstå alt i detalj hvis du leser disse artiklene, vil jeg gi deg de grunnleggende hovedpunkt av hva som skjer når vi støte på ting hele innlegget.

Komme I Gang

For det første, vi vil kick off for prosjektet vårt ved å bruke Vue CLI å opprette en ny Nuxt prosjektet:

# hvis du ikke har installert vue cli før, må du gjøre dette først, globalt:
npm installere -g @vue/cli
# eller
garn global legge @vue/cli

# da
vue init nuxt/starter-min-overganger-prosjektet
npm jeg
# eller
garn

# og
npm jeg vuex node-sass sass-lasteren
# eller
garn legge til vuex node-sass sass-lasteren

Flott! Nå er det første du vil merke er at vi har en sider-katalogen. Nuxt vil ta .vue filer i denne mappen og automatisk sette opp arbeidsplan for oss. Ganske fantastisk. Vi kan gjøre noen sider å jobbe med her, i vårt tilfelle: ca.vue, og brukere.vue.

Sette Opp Våre Kroker

Som nevnt tidligere, Nuxt tilbyr noen side kroker som er veldig hyggelig for side til side overganger. Med andre ord, vi har kroker for en side inn og ut. Så hvis vi ønsket å lage en animasjon som ville tillate oss å ha en fin påtrykk fra side til side, vi kan gjøre det fordi klassen kroker er allerede tilgjengelig for oss. Vi kan til og med navnet nye overganger per side og bruke JavaScript kroker for mer avanserte effekter.

Men hva hvis vi har noen elementer som vi ikke ønsker å forlate og gå inn, men heller overgang stillinger? I mobile applikasjoner, ting er ikke alltid forlate når de flytter fra stat til stat. Noen ganger har de en overgang sømløst fra ett punkt til et annet, og det gjør hele programmet føler veldig flytende.

Trinn Én: Vuex Butikk

Det første vi må gjøre er å sette opp en sentralisert statlig styring butikk med Vuex fordi vi kommer til å trenge for å holde hvilken side vi er currrently på.

Nuxt vil anta denne filen vil være i butikken katalogen og kalt index.js:

import Vuex fra ‘vuex’

const createStore = () => {
tilbake nye Vuex.Store({
tilstand: {
side: ‘indeks’
},
mutasjoner: {
updatePage(stat, sidenavn) {
staten.side = sidenavn
}
}
})
}

eksport standard createStore

Vi lagrer både på siden og vi vil opprette en mutasjon som gjør det mulig for oss å oppdatere siden.

Trinn To: Mellomvare

Deretter, i vår mellomvare, vi trenger et skript som jeg har kalt pages.js. Dette vil gi oss tilgang til den ruten som er i endring og oppdateres før noen av de andre komponentene, slik at det vil være svært effektiv.

eksport standard funksjon(kontekst) {
// gå og si til butikken for å oppdatere siden
sammenheng.butikken.commit(‘updatePage’, kontekst.i rute.navnet)
}

Vi kommer også til å trenge å registrere mellomvare i vår nuxt.config.js fil:

modul.eksport = {

ruter: {
mellomvare: ‘sider’
},

}
Trinn Tre: Registrer Våre Navigasjon

Nå, vi vil gå inn i vår layout/standard.vue-fil. Denne katalogen gir deg mulighet til å velge forskjellige oppsett for ulike side strukturer. I vårt tilfelle, vi kommer ikke til å lage en ny layout, men endre den ene er at vi er med på gjenbruk for hver side. Malen vår vil se ut som denne først:

<mal>
<div>
<nuxt/>
</div>
</template>

Og at nuxt/ tag vil legge inn noe som er i maler i våre forskjellige sider. Men heller enn å bruke en nav-komponenten på hver side, kan vi legge den her, og det vil bli presentert konsekvent på hver side:

<mal>
<div>
<app-navigering />
<nuxt/>
</div>
</template>
<script>
import AppNavigation fra ‘~/komponenter/AppNavigation.vue’

eksport standard {
komponenter: {
AppNavigation
}
}
</script>

Dette er også flott for oss, fordi det ikke vil rerender hver gang siden re-rutet. Det vil være konsistent på hver side, og på grunn av dette, kan vi ikke plugg inn på vår side overgang kroker, men i stedet kan vi bygge våre egne med hva vi bygget mellom Vuex og Mellomvare.

Trinn Fire: Lage vår Overganger i Navigasjon-Komponent

Nå kan vi bygge ut navigering, men jeg er også tenkt å bruke denne SVG her for å gjøre en liten demo av grunnleggende funksjonalitet vi kommer til å gjennomføre for et større program

<mal>
<nav>
<h2>Enkel Overgang Gruppe For Layout: {{ page }}</h2>
<!–enkel navigasjon, bruker vi nuxt-link for ruting lenker–>
<ul>
<nuxt-link eksakt=”/”><li>indeks</li></nuxt-link”>
<nuxt-link=”/”><li>om</li></nuxt-link”>
<nuxt-link=”/brukere”><li>brukere</li></nuxt-link”>
</ul>
<br>
<!–vi bruker siden til å oppdatere klasse med en betinget–>
<svg :class=”{ ‘aktiv’ : (page===”) } ” xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ viewBox=”0 0 447 442″>
<!– vi bruker overgangen gruppe komponent, vi trenger en g-taggen fordi det er SVG–>
<overgang-gruppe name=”liste” tag=”g”>
<rect class=”elementer rect” ref=”rect” key=”rect” bredde=”171″ høyde=”171″/>
<sirkel class=”elementer circ” key=”circ” id=”profil” cx=”382″ cy=”203″ r=”65″/>
<g class=”elementer text” id=”tekst” key=”tekst”>
<rect x=”56″ y=”225″ bredde=”226″ høyde=”16″/>
<rect x=”56″ y=”252″ bredde=”226″ høyde=”16″/>
<rect x=”56″ y=”280″ bredde=”226″ høyde=”16″/>
</g>
<rect class=”elementer footer” key=”footer” id=”footer” y=”423″ bredde=”155″ høyde=”19″ rx=”9.5″ ry=”9.5″/>
</overgang-gruppe>
</svg>
</nav>
</template>
<script>
import { mapState } fra ‘vuex’

eksport standard {
beregnet: mapState([‘side’])
}
</script>

Vi gjør et par ting her. I skriptet, kan vi bringe inn navnet på siden fra butikken som en beregnet verdi. mapState vil la oss få inn noe annet fra butikken, som vil nytte for dem senere når vi har avtale med en rekke opplysninger om brukeren.

I malen, vi har en vanlig nav med nuxt-koblinger, som er det vi bruker for ruting lenker i Nuxt. Vi har også klasse som vil bli oppdatert på en betinget basert på den siden (det vil endre til .aktiv når det er om side.

Vi bruker også <overgang-gruppe> komponent rundt en rekke elementer som vil endre posisjoner. <Overgang-gruppe> komponenten er litt magisk, fordi det gjelder begrepene FLIP under panseret. Hvis du har hørt om FLIP før, kommer du til å bli super spent på å høre dette, fordi det er et veldig effektivt måte å animere på nettet, men vanligvis tar mye av beregninger for å gjennomføre. Hvis du ikke har hørt om FLIP før, det er definitivt bra å lese for å forstå hvordan det fungerer, og kanskje enda viktigere, alle de ting du ikke lenger trenger å gjøre for å gjøre denne typen effekt av arbeidet! Kan jeg få et “Hell yeah!”

Her er CSS som gjør dette arbeidet. Vi i utgangspunktet state hvordan vi ønsker alle elementer som skal plasseres på som “aktiv” krok som vi gjorde. Da vi fortelle elementer for å ha en overgang brukes hvis noe endres. Du vil merke jeg bruker 3D forvandler selv om jeg bare å flytte noe langs en X-eller Y-aksen fordi forvandler er bedre for ytelse enn topp/venstre/margin for å redusere maling og jeg ønsker å aktivere hardware akselerasjon.

.elementer
.liste-flytte {
overgang: alle 0.4 s letthet;
}

.aktiv {
fill: #e63946;
.rect {
forvandle: translate3d(0, 30px, 0);
}
.circ {
forvandle: translateX(30px, 0, 0) skala(0.5);
}
.tekst {
forvandle: rotere(90deg) scaleX(0.08) translate3d(-300px, -35px, 0);
}
.bunntekst {
forvandle: translateX(100px, 0, 0);
}
}

Her er en redusert codepen uten side overganger, men bare for å vise bevegelse:

Se Pen layout overgang-gruppe av Sarah Drasner (@sdras) på CodePen.

Jeg ønsker å påpeke at alle implementasjoner jeg bruker her er valg som jeg har gjort for plassering og bevegelse – kan du virkelig lage noen effekt du liker! Jeg velger SVG her fordi det kommuniserer begrepet layout i en liten del av kode, men du trenger ikke å bruke SVG. Jeg er også ved hjelp av overganger i stedet for animasjon på grunn av hvordan deklarativ de er av natur – du er i essens sier: “jeg ønsker at dette skal bli omplassert her når denne klassen er slått i Vue”, og så overgangen er eneste jobb er å beskrive bevegelsen som noe endres. Dette er flott for dette bruk-saken, fordi den er svært fleksibel. Jeg kan da bestemme seg for å endre det til noe annet betinget plassering, og det vil fortsatt fungere.

Flott! Dette vil nå gi oss kraft, glatt som smør mellom sider, og vi kan fortsatt gi innholdet på siden en fin liten overgang i tillegg:

.side-inn-active {
overgang: dekkevne 0.25 s letthet-ut;
}

.side-la-active {
overgang: dekkevne 0.25 s letthet-i;
}

.side-inn,
.side-la-active {
dekkevne: 0;
}

Jeg har også lagt til i ett av eksemplene fra Nuxt nettstedet ditt for å vise at du kan fortsatt gjøre interne animasjoner innenfor den siden også:

Vis GitHub Repo

Ok, det fungerer for en liten demo, men nå la oss bruke den til noe mer virkelige verden, som vårt eksempel fra før. Igjen, den demo-området er her og repo med all koden er her.

Det er det samme konseptet:

  • Vi lagrer navnet på siden i Vuex store.
  • Mellomvare, begår en mutasjon å la butikken vet side har endret seg.
  • Vi bruker en spesiell klasse per side, og hekker overganger for hver side.
  • Navigasjon forblir konsistent på hver side, men vi har ulike posisjoner og bruke noen overganger.
  • Innholdet på siden har en fin overgang, og vi bygger i noen vekselsvirkningene basert på brukerens arrangementer

Den eneste forskjellen er at dette er en litt mer involvert i gjennomføringen. CSS som brukes på elementer vil bli den samme i navigasjon-komponent. Vi kan fortelle leseren hvilken posisjon vi ønsker alle elementer for å være i, og siden det er en overgang brukt til elementet i seg selv, at overgangen vil bli brukt, og det vil flytte til den nye posisjonen hver gang siden har endret seg.

// animasjoner
.sted {
.følg {
forvandle: translate3d(-215px, -80px, 0);
}
.profil-photo {
forvandle: translate3d(-20 piksler, -100px, 0) skala(0.75);
}
.profil-navn {
forvandle: translate3d(140px, -125px, 0) skala(0.75);
color: white;
}
.side-ikon {
forvandle: translate3d(0, -40px, 0);
bakgrunn: rgba(255, 255, 255, 0.9);
}
.kalender {
dekkevne: 1;
}
}

Det er det! Vi holder det rent og enkelt og bruke flexbox, rutenett og absolutt posisjonering i forhold container for å sørge for at alt oversettes lett på tvers av alle enheter og vi har svært få medier søk gjennom dette prosjektet. Jeg hovedsakelig bruker CSS for nav endringer fordi jeg kan declaratively staten plassering av elementer og deres overganger. For micro-vekselsvirkningene av alle bruker-drevet hendelse, jeg bruker JavaScript og GreenSock, fordi det gir meg muligheten til å koordinere mye av bevegelsen svært sømløst og stabiliserer transform-opprinnelse på tvers av nettlesere, men det er så mange måter du kan implementere dette. Det er en million måter jeg kunne forbedre denne demo-applikasjon, eller bygge på disse animasjoner, det er en rask prosjekt for å vise noen muligheter i en real-life context.

Husk å hardware akselerere og bruk forvandler, og du kan oppnå noen vakre, native-lignende effekter. Jeg er spent på å se hva du gjør! Internett har så mye potensial for vakker bevegelse, plassering, og samhandling som reduserer kognitiv belastning for brukeren.