Native-Som Animationer för Sidan Övergångar på Webben

0
35

Några av de mest inspirerande exempel som jag har sett av front end utveckling har inneburit någon form av sida övergångar som ser smart, som de gör i mobila appar. Men även om fantasi för dessa typer av interaktioner verkar överflöd, deras närvaro på aktuella webbplatser som jag besöker inte. Det finns ett antal olika sätt att utföra dessa typer av rörelse!

Här är vad vi kommer att bygga:

Demo Webbplats

GitHub Repo

Vi ska bygga ut den enklaste möjliga distallation av dessa begrepp så att du kan tillämpa dem på alla program, och sedan ska jag också ge koden för detta mer komplexa app om du vill dyka i.

Idag kommer vi att diskutera hur man skapar dem med Vue och Nuxt. Det finns en hel del rörliga delar i sidan övergångar och animeringar (lol jag döda mig), men oroa dig inte! Något vi inte har tid att täcka i den artikel, vi kommer länka ut till andra resurser.

Varför?

Webben har kommit under kritik på senare år för att visas “daterad” i jämförelse med infödda iOS och Android app erfarenheter. Övergång mellan två stater kan minska den kognitiva belastningen för användaren, som när någon är scanning en sida, de har för att skapa en mental karta av allt som finns på den. När vi flytta från sida till sida, har användaren att mappa om att hela utrymmet. Om ett element upprepas på flera sidor, men ändras något, det efterliknar den erfarenhet vi har varit biologiskt utbildad att förvänta sig, inget man bara dyker in i ett rum eller ändras plötsligt; de övergången från ett annat rum i denna. Dina ögon ser någon som är mindre i förhållande till dig. När de kommer närmare i närheten av dig, de blir större. Utan dessa övergångar och förändringar kan vara skrämmande. De tvingar användaren att mappa om placering och även deras förståelse av samma element. Det är av denna anledning som dessa effekter bli avgörande i en upplevelse som hjälper användaren att känna sig hemma och samla in information snabbt på webben.

Den goda nyheten är, att genomföra dessa typer av övergångar är helt genomförbart. Låt oss gräva i!

Förkunskaper

Om du är obekant med Nuxt och hur man arbetar med det för att skapa Vue.js program, det är en annan artikel som jag skrev om ämnet här. Om du är bekant med att Reagera och Next.js, Nuxt.js är de Vue motsvarande. Det erbjuder server-side-rendering, kod delning, och viktigast av allt, krokar för sidan övergångar. Även om sidan övergång krokar erbjuder är utmärkt, det är inte hur vi kommer att utföra den största delen av våra animationer i denna handledning.

För att förstå hur de övergångar som vi jobbar med idag fungerar, du måste också ha grundläggande kunskaper runt <övergång /> komponent-och skillnaden mellan CSS-animeringar och övergångar. Jag har täckt både i mer detalj här. Du behöver också grundläggande kunskaper om <övergång-group /> komponent-och detta Snipcart inlägg är en bra resurs för att lära sig mer om det.

Även om du inte förstår allt i mer detalj om du läser dessa artiklar ska jag ge dig den grundläggande kärnan i vad som händer när vi stöter på saker i inlägget.

Komma Igång

Först vill vi kick off för vårt projekt genom att använda de Vue CLI för att skapa en ny Nuxt projekt:

# om du inte har installerat vue cli innan, gör detta först, globalt:
npm install-g @vue/cli
# eller
garn globala lägg till @vue/cli

# sedan
vue init nuxt/starter min-övergångar-projekt
npm jag
# eller
garn

#
npm jag vuex nod-sass sass-loader
# eller
garn lägg till vuex nod-sass sass-loader

Bra! Nu är det första du kommer att märka är att vi har en sidor i katalogen. Nuxt kommer att ta någon .vue filer i katalogen och automatiskt ställa in routing för oss. Ganska häftigt. Vi kan göra vissa sidor att arbeta med här, i vårt fall: ca.vue, och användare.vue.

Att Sätta Upp Våra Krokar

Som tidigare nämnts, Nuxt erbjuder någon sida krokar som är riktigt fina för sida till sida övergångar. Med andra ord, vi har krokar för en sida in-och utresor. Så om vi ville skapa en animation som skulle tillåta oss att ha en trevlig fade från sida till sida, vi kunde göra det eftersom klassen krokar är redan tillgänglig för oss. Vi kan även namnge nya övergångar per sida och använda JavaScript krokar för mer avancerade effekter.

Men vad händer om vi har några delar som vi inte vill lämna och återvända till, utan snarare en övergång positioner? I mobila applikationer, att saker och ting inte alltid lämna när de flyttar från stat till stat. Ibland är de övergång sömlöst från en punkt till en annan och det gör hela programmet känner sig mycket vätska.

Steg Ett: Vuex Butik

Det första vi måste göra är att inrätta en centraliserad statlig förvaltning butik med Vuex eftersom vi kommer att behöva för att hålla vad sidan vi currrently på.

Nuxt kommer att anta denna fil kommer att finnas i butik, katalog och heter index.js:

importera Vuex från “vuex’

const createStore = () => {
avkastning ny Vuex.Store({
tillstånd: {
sida: ‘index’
},
mutationer: {
updatePage(stat, sidnamn) {
stat.page = sidnamn
}
}
})
}

export standard createStore

Vi lagra både sidan och vi skapar en mutation som gör det möjligt för oss att uppdatera sidan.

Steg Två: Middleware

Då, i vår middleware, vi behöver ett skript som jag har kallat pages.js. Detta kommer att ge oss tillgång till den väg som förändras och uppdateras innan någon av de andra komponenterna, så det kommer vara mycket effektiv.

export standard funktion(sammanhang) {
// gå och säg till butiken för att uppdatera sidan
sammanhanget.lagra.begå(‘updatePage’, sammanhang.rutt.namn)
}

Vi kommer också att behöva registrera middleware i vår nuxt.config.js fil:

modulen.exporten = {

router: {
middleware: ‘sidor’
},

}
Steg Tre: Registrera Våra Navigering

Nu går vi in i våra layouter/default.vue-fil. Denna katalog kan du ställa in olika layouter för olika sidor strukturer. I vårt fall, vi kommer inte att göra en ny layout, men att ändra det som vi återanvända för varje sida. Mallen ser ut så här:

<mall>
<div>
<nuxt/>
</div>
</template>

Och att nuxt/ tag kommer in något som finns i mallar på våra olika sidor. Men i stället för att återanvända ett nav-komponenten på varje sida, så kan vi lägga till det här och det kommer att presenteras konsekvent på varje sida:

<mall>
<div>
<app-navigation />
<nuxt/>
</div>
</template>
<script>
importera AppNavigation från ‘~/components/AppNavigation.vue’

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

Det är också bra för oss eftersom det inte kommer att rerender varje gång sidan omdirigeras. Det kommer att vara konsekvent på varje sida och på grund av detta, vi kan inte koppla in vår sida övergång krokar men istället vi kan bygga våra egna med vad vi byggt mellan Vuex och Middleware.

Steg Fyra: Skapa vår Övergångar i Navigation Komponent

Nu kan vi bygga ut navigation, men jag kommer också att använda denna SVG här för att göra en liten demo av grundläggande funktioner vi kommer att genomföra för en större tillämpning.

<mall>
<nav>
<h2>Enkel Övergång Grupp För Layout: {{ sida }}</h2>
<!–enkel navigering, vi använder nuxt-länken för routing länkar–>
<ul>
<nuxt-länk exakta=”/”><li>index</li></nuxt-länk>
<nuxt-länk=”/”><li>om</li></nuxt-länk>
<nuxt-länk=”/användare”><li>användare</li></nuxt-länk>
</ul>
<br>
<!–vi använder sidan för att uppdatera klass med en villkorlig–>
<svg :class=” {“aktiv”: (sida === ‘om’) }” xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ viewBox=”0 0 447 442″>
<!– vi använder övergång grupp komponent, vi behöver en g tag eftersom det är SVG–>
<övergång-gruppen namn=”listan” tag=”g”>
<rect class=”rect” ref=”rect” key=”rect” width=”171″ height=”171″/>
<cirkel class=”poster cirk” key=”cirk” id=”profile” cx=”382″ cy=”203″ r=”65″/>
<g class=”text” id=”text” – tangenten=”text”>
<rect x=”56″ y=”225″ width=”226″ height=”16″/>
<rect x=”56″ y=”252″ width=”226″ height=”16″/>
<rect x=”56″ y=”280″ width=”226″ height=”16″/>
<g>
<rect class=”footer” key=”footer” id=”footer” y=”423″ width=”155″ height=”19″ rx=”9.5″ ry=”9.5″/>
</övergång-grupp>
</svg>
</nav>
</template>
<script>
import { mapState } från “vuex’

export standard {
beräknad: mapState([‘page’])
}
</script>

Vi gör ett par saker här. I skriptet, vi tar in sidans namn från affären som ett beräknat värde. mapState kommer att låta oss ta in allt annat från butiken, som kommer till hands senare när vi arbetar med en massa information till användare.

I mallen, vi har en vanlig nav med nuxt-länkar, vilket är vad vi använder för dirigering av länkar i Nuxt. Vi har också en klass som kommer att uppdateras på en villkorlig baserade på sidan (det kommer att ändras till .aktiv vid sidan om.

Vi är också med <övergång-grupp> komponent runt ett antal faktorer som kommer att ändra ställning. <Övergång-grupp> komponent är lite magisk eftersom det gäller begreppen FLIP under huven. Om du har hört talas om FLIP innan, du kommer att bli super glada över att höra detta eftersom det är en riktigt hög prestanda sätt att animera på webben men oftast tar en hel del beräkningar att genomföra. Om du inte har hört av FLIP innan, det är definitivt bra att läsa för att förstå hur det fungerar, och kanske ännu viktigare, att alla de saker du inte längre behöver göra för att göra denna typ av effekt arbete! Kan jag få en “Hell yeah!”

Här är CSS som gör detta arbete. Vi i grund och botten hur vi skulle vilja att ni alla delar att vara placerad på att “aktiv” krok som vi gjort. Då kan vi berätta för de faktorer som har en övergång tillämpas om något ändras. Du ska notera att jag med hjälp av 3D-förvandlar även om jag bara flyttar något längs en X-eller Y-axeln eftersom transformer är ett bättre prestanda än övre/vänster/marginal för att minska måla och jag vill aktivera maskinvaruacceleration.

.poster,
.lista-flytta {
övergång: alla 0.4 s lätthet;
}

.active {
fyllning: #e63946;
.rect {
förändra: translate3d(0, 30px, 0);
}
.cirk {
förändra: translateX(30px, 0, 0) skala(0.5);
}
.sms: a {
förändra: rotera(90deg) scaleX(0.08) translate3d(-300px, -35px, 0);
}
.sidfot {
förändra: translateX(100px, 0, 0);
}
}

Här är en minskad codepen utan att sidan övergångar, men bara för att visa rörelse:

Se Pennan layout övergång-grupp av Sarah Drasner (@sdras) på CodePen.

Jag vill påpeka att alla implementationer jag använder här är val som jag har gjort för placering och rörelse – kan du verkligen skapa någon effekt du vill! Jag väljer SVG här eftersom det kommunicerar begreppet layout i en liten mängd kod, men du behöver inte använda SVG. Jag är också med övergångar istället för att animation på grund av hur deklarativ de är av naturen – du är i huvudsak anger: “jag vill att detta ska flyttas hit när denna klass är växlas i Vue”, och då övergången är enda uppgift är att beskriva rörelsen som något förändras. Detta är bra för denna användning-fallet eftersom det är mycket flexibla. Jag kan då besluta om att ändra det till något annat villkorlig placering och det kommer fortfarande att fungera.

Bra! Detta kommer nu att ge oss kraft, mjuk som smör mellan sidor, och vi kan fortfarande ge innehållet på sidan en fin liten övergången:

.page-enter-active {
övergång: opacitet 0.25 s ease-out;
}

.sida-lämna-active {
övergång: opacitet 0.25 s lätthet.
}

.page-enter,
.sida-lämna-active {
opacitet: 0;
}

Jag har även lagt till i ett av exemplen från Nuxt webbplats för att visa att du fortfarande kan göra interna animationer inom sidan:

Visa GitHub Repo

Ok, det fungerar för en liten demo, men låt oss nu använda den till något mer verkliga världen, som vårt exempel från innan. Igen, demo webbplats är här och repa med all kod är här.

Det är samma koncept:

  • Vi lagrar namnet på sidan i Vuex butik.
  • Middleware begår en mutation för att låta butiken vet att sidan har ändrats.
  • Vi tillämpar en särskild klass per sida, och boet övergångar för varje sida.
  • Navigering förblir konsekvent på varje sida, men vi har olika positioner och tillämpa några övergångar.
  • Innehållet på sidan har en diskret övergång och vi bygger i vissa interaktioner baserade på användarens händelser

Den enda skillnaden är att detta är en något mer engagerade i genomförandet. CSS som tillämpas på de delar kommer att förbli i navigation komponent. Vi kan tala om för webbläsaren vilken position vi vill att alla element för att vara i, och eftersom det är en övergång tillämpas till den del av sig själv, att övergången kommer att tillämpas och det kommer att flytta till ny position varje gång sidan har ändrats.

// animationer
.plats {
.följ {
förändra: translate3d(-215px, -80px, 0);
}
.profil-photo {
förändra: translate3d(-20px, -100px, 0) skala(0.75);
}
.profil-namn {
förändra: translate3d(140px, -125px, 0) skala(0.75);
färg: vit.
}
.sida-ikonen {
förändra: translate3d(0, -40px, 0);
bakgrund: rgba(255, 255, 255, 0.9);
}
.kalendern {
opacitet: 1;
}
}

Det är det! Vi hålla det trevligt och enkelt och använda flexbox, rutnät och absolut positionering i förhållande container för att se till att allt översätter lätt på alla enheter och vi har mycket få media frågor genom detta projekt. Jag är främst med hjälp av CSS för nav förändringar eftersom jag kan declaratively ange placering av elementen och deras övergångar. För mikro-interaktioner av alla användare som drivs händelse, jag använder JavaScript och GreenSock, eftersom det tillåter mig att samordna en hel del rörelse är mycket smidigt och stabiliserar omvandla ursprung i olika webbläsare, men det finns så många sätt man skulle kunna genomföra detta. Det finns en miljon olika sätt jag skulle kunna förbättra denna demo-applikation, eller att bygga vidare på dessa animationer, det är en snabb projektet att visa på några möjligheter i verkliga livet.

Kom ihåg att hårdvara påskynda och använda transformer, och du kan få några vackra, native-liknande effekter. Jag ser fram emot att se vad du gör! Webben har så mycket potential för vackra rörelser, placering och interaktion som minskar den kognitiva belastningen för användaren.