Native-Achtige Animaties voor de Pagina-Overgangen op het Web

0
43

Enkele van de meest inspirerende voorbeelden die ik heb gezien van front-end ontwikkeling betrokken in een soort van pagina-overgangen die er slick, zoals ze doen in de mobiele apps. Echter, hoewel de verbeelding voor deze soorten interacties lijken in overvloed, hun aanwezigheid op de werkelijke sites die ik bezoek niet. Er zijn een aantal manieren voor het uitvoeren van deze vormen van beweging!

Hier is wat we gaan bouwen:

Demo Website

GitHub Repo

We bouwen de eenvoudigste mogelijk distallation van deze concepten, zodat u ze kunt toepassen voor elke toepassing, en dan zal ik ook de code voor deze meer complexe app als je wilt om er in te duiken.

Vandaag gaan we bespreken hoe ze te maken met Vue en Nuxt. Er zijn een heleboel van de bewegende delen in de pagina-overgangen en animaties (lol ik kill me), maar wees niet ongerust! Alles wat we hebben geen tijd om het deksel in het artikel, zullen we de link uit om met andere middelen.

Waarom?

Het web is gekomen onder kritiek in de afgelopen jaren voor het verschijnen van” in vergelijking met native iOS-en Android-app ervaringen. De overgang tussen de twee staten te verminderen kan de cognitieve belasting voor de gebruiker, zoals wanneer iemand het scannen van een pagina, ze hebben voor het maken van een mentale kaart van alles dat is opgenomen op. Wanneer we verplaatsen van pagina naar pagina, de gebruiker heeft om te toewijzen dat de hele ruimte. Indien een element wordt herhaald op verschillende pagina ‘ s, maar veranderde iets, het bootst de ervaring die we hebben zijn biologisch opgeleid te verwachten, niemand springt in een kamer of wijzigingen plotseling; zij overgang vanuit een andere ruimte in deze. Je ogen zien, iemand die kleiner is in vergelijking met jou. Als ze dichter in de buurt van u, ze krijgen groter. Zonder deze overgangen kunnen wijzigingen worden opzienbarend. Ze dwingen de gebruiker opnieuw toewijzen plaatsing en zelfs hun begrip van hetzelfde element. Het is om deze reden dat deze effecten van cruciaal belang geworden in een ervaring die de gebruiker helpt zich thuis voelen en het verzamelen van informatie snel op het web.

Het goede nieuws is, het implementeren van dit soort overgangen is het helemaal goed te doen. Laten we graven in!

Vereiste Voorkennis

Als u niet bekend bent met Nuxt en hoe werken maken Vue.js toepassingen, er is een ander artikel dat ik schreef over het onderwerp hier. Als u bekend bent met Reageren en Next.js, Nuxt.js is de Vue-equivalent. Het biedt server-side rendering, code splitsen, en nog belangrijker, haken voor de pagina-overgangen. Hoewel de pagina-overgang haken het biedt zijn uitstekend, dat is niet hoe we gaan voor het verwezenlijken van de bulk van onze animaties in deze tutorial.

Om te begrijpen hoe de overgangen we werken met vandaag te doen werken, moet u ook de basiskennis rond de <overgang /> component en het verschil tussen CSS-animaties en overgangen. Ik heb zowel in meer detail hier. U heeft ook basiskennis van de <transitie-groep /> component en deze Snipcart post is een geweldige bron om meer over te leren.

Zelfs niet als je juist alles in meer detail mocht u na het lezen van deze artikelen, ik geef je de fundamentele kern van wat er aan de hand als we geconfronteerd met dingen die de rest van de post.

Aan De Slag

Ten eerste willen we de aftrap van ons project door de Vue CLI maken van een nieuwe Nuxt project:

# als u nog niet geïnstalleerd vue cli voor, doe dit eerst, wereldwijd:
npm installeren -g @vue/cli
# of
garen global toevoegen @vue/cli

#
vue init nuxt/starter-mijn-overgangen-project
npm ik
# of
garen

# en
npm ik vuex node-sass sass-loader
# of
garen toevoegen vuex node-sass sass-loader

Geweldig! Nu, het eerste wat je zal opvallen is dat we een gids. Nuxt zal nemen .vue bestanden in die map en dat het automatisch instellen van routing voor ons. Pretty awesome. Wij kunnen sommige pagina ‘ s om mee te werken hier, in ons geval: over.vue en gebruikers.vue.

Het Opzetten Van Onze Haken

Zoals eerder vermeld, Nuxt biedt een aantal pagina haken, die zijn echt leuk is voor de pagina-overgangen. In andere woorden, we moeten haken voor een pagina binnenkomt en verlaat. Dus als we wilden om een animatie te maken die ons in staat zou stellen om een mooie fade-pagina ‘ s, die we konden doen, omdat de klasse haken zijn al beschikbaar zijn voor ons. We kunnen zelfs de naam van de nieuwe overgangen per pagina en gebruik van JavaScript hooks voor meer geavanceerde effecten.

Maar wat als we de elementen die we niet willen verlaten en opnieuw in te voeren, maar de overgang posities? In mobiele applicaties, de dingen niet altijd vertrekken als ze verplaatsen van staat tot staat. Soms zijn ze de overgang naadloos van het ene punt naar het andere en het maakt het hele toepassing voel me erg vloeistof.

Stap Één: Vuex Winkel

Het eerste wat we moeten doen is het opzetten van een gecentraliseerde staat het management winkel met Vuex, want we gaan aan de noodzaak om vast te houden welke pagina we zijn momenteel op.

Nuxt zal aannemen dat dit bestand zich in de directory opslaan en riep index.js:

importeren Vuex van ‘vuex’

const createStore = () => {
return new Vuex.Winkel({
staat: {
pagina: ‘index’
},
mutaties: {
updatePage(staat, paginanaam) {
staat.pagina = paginanaam
}
}
})
}

export standaard createStore

Slaan We zowel de pagina en we maken een mutatie die ons in staat stelt om het bijwerken van de pagina.

Stap Twee: Middleware

Dan, in onze middleware, moeten we een script dat ik heb genoemd pages.js. Dit geeft ons toegang tot de route dat is aan het veranderen en worden bijgewerkt voordat een van de andere componenten, dus het zal zeer efficiënt.

export standaard functie(context) {
// ga vertellen de winkel voor het bijwerken van de pagina
de context.store.commit(‘updatePage’, de context.route.naam)
}

We moeten voor het registreren van de middleware in onze nuxt.config.js bestand:

de module.export = {

router: {
middleware: ‘pagina ‘ s’
},

}
Stap Drie: Registreer Onze Navigatie

Nu gaan we in onze lay-outs/standaard.vue-bestand. Deze map kunt u verschillende lay-outs voor verschillende pagina structuren. In ons geval is, gaan wij niet om een nieuwe lay-out, maar veranderen de één dat we het hergebruiken van elke pagina. Onze sjabloon zal er als volgt uitzien:

<sjabloon>
<div>
<nuxt/>
</div>
</template>

En dat nuxt/ tag invoegen van iets dat in de sjablonen in onze verschillende pagina ‘ s. Maar in plaats van het hergebruiken van een nav component op elke pagina, we kunnen het hier en het zal worden gepresenteerd consequent op elke pagina:

<sjabloon>
<div>
<app-navigatie />
<nuxt/>
</div>
</template>
<script>
importeren AppNavigation van ‘~/onderdelen/AppNavigation.vue’

export standaard {
onderdelen: {
AppNavigation
}
}
</script>

Dit is ook voor ons goed omdat het niet rerender elke keer dat de pagina wordt omgeleid. Het zal consistent op elke pagina, en omdat we niet plug in een van onze pagina-overgang haken, maar in plaats daarvan kunnen we onze eigen op te bouwen met wat we gebouwd tussen Vuex en de Middleware.

Stap Vier: Maak ons Overgangen in het Onderdeel Navigatie

Nu kunnen we bouwen aan de navigatie, maar ik ga ook gebruik maken van dit SVG hier om een kleine demo van de basisfunctionaliteit we gaan voeren voor een grotere toepassing

<sjabloon>
<nav>
<h2>Eenvoudige Overgang Groep Voor Lay-out: {{ pagina }}</h2>
<!–de eenvoudige navigatie, gebruiken wij nuxt-link voor de routering van links–>
<ul>
<nuxt-link exacte=”/”><li>index</li></nuxt-link>
<nuxt-link=”/about”><li>over</li></nuxt-link>
<nuxt-link=”/gebruikers”><li>gebruikers</li></nuxt-link>
</ul>
<br>
<!–we maken gebruik van de pagina voor het bijwerken van de klasse met een voorwaardelijke–>
<svg :class=”{ ‘actief’ : (pagina === ‘ongeveer’) }” xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ viewBox=”0 0 447 442″>
<!– we gebruiken de overgang van groep component, we hebben een g label omdat het SVG–>
<overgang-group name=”lijst” tag=”g”>
<rect class=”items rect” ref=”rect” key=”rect” width=”171″ height=”171″/>
<circle class=”items circ” key=”circ” id=”profiel” cx=”382″ cy=”203″ r=”65″/>
<g class=”items text” id=”tekst” key=”tekst”>
<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=”items voettekst” key=”footer” id=”footer” y=”423″ width=”155″ height=”19″ rx=”9.5″ ry=”9.5″/>
</transitie-groep>
</svg>
</nav>
</template>
<script>
importeren { mapState } van ‘vuex’

export standaard {
berekend: mapState([‘page’])
}
</script>

We doen hier een aantal dingen. In het script, brengen wij in de naam van de pagina van de winkel als een berekende waarde. mapState laat het ons om iets anders uit de winkel, die later goed van pas wanneer we te maken met veel informatie voor de gebruiker.

In het sjabloon, we hebben een regelmatige nav met nuxt-links, dat is wat wij gebruiken voor het routeren van de links in Nuxt. We hebben ook de klasse, die zal worden bijgewerkt op een voorwaardelijke gebaseerd op de pagina (het zal veranderen .actief als het de over pagina.

We zijn ook met behulp van de <transitie-groep> component rond een aantal elementen die wisselen van positie. De <transitie-groep> component is een beetje magisch omdat de toepassing van de concepten van FLIP onder de motorkap. Als je hebt gehoord van FLIP voor, je gaat super blij om dit te horen, want het is echt een performante manier van animeren op het web, maar duurt meestal een veel berekeningen door te voeren. Als u nog niet gehoord van de KLEP voor, het is zeker goed om te lezen om te begrijpen hoe het werkt, en misschien nog belangrijker, alle van de dingen die je niet meer hoeft te doen om dit effect werkt! Kan ik een “Hell yeah!”

Hier is de CSS-dat maakt dit werk. We hebben in feite staat hoe we willen graag alle elementen geplaatst worden, op die “actief” haak die we hebben gemaakt. Dan vertellen we de elementen om een overgang toegepast als er iets verandert. U ziet ik ben met behulp van 3D-transformaties, zelfs als ik gewoon het verplaatsen van iets langs de X-of Y-as, omdat transformeert beter zijn voor de prestaties dan boven/links/marge voor het verminderen van de verf en ik wil enable hardware acceleration.

.items
.lijst-move {
overgang: alle 0,4 s gemak;
}

.active {
vullen: #e63946;
.rect {
transformeren: translate3d(0, 30 met een afwijkende, 0);
}
.circ {
transformeren: translateX(30 met een afwijkende, 0, 0) schaal(0.5);
}
.tekst {
transform: rotate(90deg) scaleX(0.08) translate3d(-300px, -35px, 0);
}
.footer {
transformeren: translateX(100px, 0, 0);
}
}

Hier is een verminderde codepen zonder de pagina-overgangen, maar gewoon om te laten zien de beweging:

Zie de Pen lay-out transitie-groep door Sarah Drasner (@sdras) op CodePen.

Ik wil u er op wijzen dat alle implementaties die ik hier gebruik zijn keuzes die ik heb gemaakt voor de plaatsing en de beweging die je echt kunt creëren een effect dat u wilt! Ik ben het kiezen van SVG hier, want het communiceert het concept van de lay-out in een klein bedrag van de code, maar je moet niet gebruik maken van SVG. Ik ben ook met behulp van overgangen in plaats van de animatie, want hoe declaratieve ze zijn door de natuur – je bent in essentie met vermelding van: “ik wil dat deze worden verplaatst wanneer deze les wordt gegeven in Vue”, en dan is de overgang van de taak is voor het beschrijven van de beweging als er iets verandert. Dit is groot voor deze use-case omdat het erg flexibel is. Ik kan dan beslissen om het te veranderen naar elke andere voorwaardelijke plaatsing en het zal nog steeds werken.

Geweldig! Dit nu geeft ons het effect, glad als boter tussen pagina ‘ s, en we kunnen nog steeds geeft de inhoud van de pagina voor een klein overgang:

.pagina-enter-active {
overgang: dekking 0,25 s ease-out;
}

.pagina-laat-active {
overgang: dekking 0,25 s gemak-in;
}

.pagina-enter,
.pagina-laat-active {
opacity: 0;
}

Ik heb ook nog in een van de voorbeelden van de Nuxt site om te laten zien dat je nog steeds kunt doen interne animaties op de pagina:

Bekijk GitHub Repo

Ok, dat werkt voor een kleine demo, maar nu laten we het toepassen op iets meer van de echte wereld, als ons voorbeeld. Nogmaals, de demo site is hier en het archief met alle van de code is hier.

Het is hetzelfde concept:

  • We slaan de naam van de pagina in de Vuex store.
  • Middleware verplicht een mutatie te laten maken van de winkel weet dat de pagina gewijzigd is.
  • Wij hanteren een speciale klasse per pagina, en nesten van overgangen voor elke pagina.
  • De navigatie consistent blijft op elke pagina, maar we hebben verschillende posities en sommige overgangen.
  • De inhoud van de pagina heeft een subtiele overgang en bouwen we in sommige interacties zijn gebaseerd op gebruikers-evenementen

Het enige verschil is dat dit een beetje meer betrokken bij de uitvoering. De CSS die is toegepast op de elementen blijven gelijk in de navigatie component. We vertellen de browser welke positie willen we alle elementen om te zijn, en omdat er een overgang toegepast op het element zelf, dat de overgang zal worden toegepast, en het zal zich verplaatsen naar de nieuwe positie elke keer dat de pagina gewijzigd is.

// animaties
.plaats {
.volg {
transformeren: translate3d(-215px, -80px, 0);
}
.profiel-foto {
transformeren: translate3d(-20px, -100px, 0) schaal(0.75);
}
.profiel-naam {
transformeren: translate3d(140px, -125px, 0) schaal(0.75);
kleur: wit;
}
.kant-icon {
transformeren: translate3d(0, -40px, 0);
achtergrond: rgba(255, 255, 255, 0.9);
}
.agenda {
dekking: 1;
}
}

Dat is het! We houden het leuk en simpel, en gebruik flexbox, raster en absolute positionering in een relatieve container en ervoor zorgen dat alles vertaalt zich gemakkelijk in alle apparaten en we hebben zeer weinig media-query ‘ s door middel van dit project. Ik ben voornamelijk met behulp van CSS voor de nav wijzigingen, want ik kan het declaratief staat de plaatsing van de elementen en hun overgangen. Voor de micro-interacties van elke gebruiker-gedreven geval, ik ben met behulp van JavaScript en GreenSock, omdat het me in staat stelt te coördineren veel beweging zeer naadloos en stabiliseert transformeren oorsprong in verschillende browsers, maar er zijn zo veel manieren waarop u zou kunnen implementeren. Er zijn een miljoen manieren waarop ik kon het verbeteren van deze demo applicatie, of bouwen op deze animaties, het is een snelle project om te laten zien wat de mogelijkheden in de context van het echte leven.

Vergeet niet om de hardware te versnellen en het gebruik verandert, en u kunt het bereiken van een aantal mooie, native-achtige effecten. Ik ben opgewonden om te zien wat je maakt! Het web is zo veel potentieel voor mooie beweging, de plaatsing en de interactie die minder cognitieve belasting voor de gebruiker.