Native-Like Animationen für Seitenübergänge auf das Web

0
36

Einige der beeindruckendsten Beispiele, die ich gesehen habe von front-end-Entwicklung beteiligt irgendeine Art von Seite übergänge, die Aussehen, slick, wie Sie in mobilen apps. Doch auch wenn die Vorstellung für diese Arten von Wechselwirkungen scheinen im überfluss, Ihre Präsenz auf aktuellen Websites, die ich Besuche nicht. Es gibt eine Reihe von Möglichkeiten, um zu erreichen diese Art der Bewegung!

Hier ist, was wir uns bauen:

Demo-Website

GitHub Repo

Wir bauen den einfachsten möglich distallation dieser Konzepte, so dass Sie anwenden können, Sie zu jeder Anwendung, und dann werde ich auch die code für diese komplexeren app, wenn Sie möchten, Tauchen Sie ein in.

Heute werden wir diskutieren, wie man erstellen Sie mit Vue und Nuxt. Es gibt eine Menge von beweglichen teilen in Seitenübergänge und Animationen (lol ich töte mich), aber keine Sorge! Alles, was wir nicht haben Zeit, um in dem Artikel, werden wir link ab, um mit anderen Ressourcen.

Warum?

Das web hat unter Kritik in den letzten Jahren für das erscheinen “veraltet” im Vergleich zu nativen iOS-und Android-app-Erlebnisse. Übergang zwischen zwei Zuständen kann reduzieren die kognitive Belastung für den Benutzer, als wenn jemand Scannen einer Seite, die Sie haben, um eine mentale Karte von allem, was auf Ihr enthalten ist. Wenn wir uns bewegen, von Seite zu Seite, hat der Nutzer die Neuzuordnung der gesamte Raum. Wenn ein element wiederholt sich auf verschiedenen Seiten, aber leicht geändert, es ahmt die Erfahrung haben wir schon biologisch ausgebildet zu erwarten — niemand klappt einfach in ein Zimmer, oder ändert sich plötzlich; Sie übergang von einem anderen Zimmer in dieses eine. Ihre Augen finden Sie jemanden, der kleiner ist im Verhältnis zu Ihnen. Als Sie näher kommen, in die Nähe zu Ihnen, Sie bekommen größer. Ohne diese übergänge, Veränderungen kann erschreckend. Zwingen Sie den Benutzer neu zuordnen, Platzierung und auch Ihr Verständnis des gleichen Elements. Es ist aus diesem Grund, dass diese Effekte werden kritisch, eine Erfahrung, die hilft dem Benutzer, sich zu Hause fühlen und sammeln Sie schnell Informationen auf dem web.

Die gute Nachricht ist, die Umsetzung dieser Art der übergänge ist völlig machbar. Let ‘ s dig in!

Erforderliche Kenntnisse

Wenn Sie nicht vertraut sind mit Nuxt und wie mit ihm zu arbeiten zu erstellen Vue.js Anwendungen, es ist ein weiterer Artikel schrieb ich über das Thema hier. Wenn Sie vertraut sind mit und Reagieren Next.js, Nuxt.js ist die Vue entspricht. Es bietet server-side-rendering, code splitting, und die meisten wichtiger ist, die Haken für die Seitenübergänge. Obwohl die Seite transition hooks, die es bietet sind hervorragend, und das ist nicht, wie wir zu erreichen sind die meisten unserer Animationen in diesem tutorial.

Um zu verstehen, wie die übergänge arbeiten wir mit der heutigen Arbeit zu tun, Sie müssen auch über grundlegende Kenntnisse rund um die <transition / > – Komponente und der Unterschied zwischen CSS-Animationen und übergänge. Ich habe die beiden hier näher. Sie müssen auch Grundkenntnisse der <transition-Gruppe / > – Komponente und das Snipcart Beitrag ist eine großartige Ressource, um mehr darüber zu erfahren.

Auch wenn Sie verstehen, alles im detail, wenn Sie Lesen diesen Artikel, ich gebe dir den Grundtenor dessen, was vor sich geht, wie wir uns begegnen Dinge, die während des post.

Erste Schritte

Zuerst möchten wir unsere kick-off-Projekt mit der Vue CLI zum erstellen einer neuen Nuxt Projekt:

# wenn Sie noch nicht installiert hat, vue cli vor, dies zu tun, erste, weltweit:
npm install-g @vue/cli
# oder
Garn globalen add @vue/cli

# dann
vue init nuxt/starter-meine-übergänge-Projekt
npm i
# oder
Garn

# und
npm-ich vuex-Knoten-sass, sass-loader
# oder
Garn hinzufügen, vuex-Knoten-sass, sass-loader

Super!!! Nun, die erste Sache, die Sie bemerken werden, ist, dass wir eine Seiten-Verzeichnis. Nuxt erfolgt .vue-Dateien in das Verzeichnis und automatisch das routing für uns. Ziemlich genial. Wir können einige Seiten, die hier arbeiten, in unserem Fall: über.vue und Benutzer.vue.

Die Einrichtung Unserer Haken

Wie bereits erwähnt, Nuxt bietet einige Seite die Haken sind wirklich schön für die Seite zu Seite übergänge. In anderen Worten, wir haben die Haken für eine Seite betreten und verlassen. Also, wenn wir wollten, um eine animation zu erstellen, die uns erlauben würde, um einen schönen übergang von Seite zu Seite, wie wir es tun konnte, da die Klasse, die Haken sind bereits bei uns verfügbar. Wir können sogar Namen neue übergänge pro Seite und die JavaScript verwenden, Haken für erweiterte Effekte.

Aber was ist, wenn wir haben einige Elemente, die wir nicht wollen, zu verlassen und erneut eingeben, sondern der übergang Positionen? In mobile Anwendungen, die Dinge nicht immer gehen, wenn Sie bewegen sich von Staat zu Staat. Manchmal haben Sie den nahtlosen übergang von einem Punkt zum anderen und es macht die ganze Anwendung fühlen sich sehr flüssig.

Schritt Eins: Vuex-Shop

Das erste, was wir tun müssen, ist die Einrichtung einer zentralen staatlichen Verwaltung-store mit Vuex, weil wir gehen zu müssen, um zu halten, was Seite wir sind currrently auf.

Nuxt wird angenommen, diese Datei wird in dem Verzeichnis speichern, und rief index.js:

import Vuex von ‘vuex’

const createStore = () => {
return new Vuex.Store({
Status: {
Seite: ‘index’
},
Mutationen: {
updatePage(Staat, pageName) {
Zustand.page = Seitenname
}
}
})
}

export Standard-createStore

Wir speichern sowohl die Seite, und wir erstellen eine mutation, die es uns erlaubt, die Seite zu aktualisieren.

Schritt Zwei: Middleware

Dann, in unsere middleware, brauchen wir ein Skript, das ich genannt habe pages.js. Dies gibt uns Zugang zu der route, verändert und aktualisiert wird, bevor die anderen Komponenten, so wird es sehr effizient.

export Standard-function(context) {
// gehe zu sagen den laden, die Seite zu aktualisieren
Kontext.store.commit(‘updatePage’, Rahmen.route.name)
}

Wir müssen auch registrieren die middleware in unserem nuxt.config.js Datei:

– Modul.Exporte = {

router: {
middleware: ‘Seiten’
},

}
Schritt Drei: Registrieren Unsere Navigation

Nun gehen wir in unsere layouts/default.vue-Datei. Dieses Verzeichnis ermöglicht Ihnen, verschiedene layouts für verschiedene Seitenstrukturen. In unserem Fall, wir sind nicht gehen, um ein neues layout, aber verändern Sie die eine, die wir wiederverwenden für jede Seite. Unsere Vorlage Aussehen wird, wie dies auf den ersten:

<Vorlage>
<div>
<nuxt/>
</div>
</template>

Und dass nuxt/ tag wird legen Sie alles, was in den Vorlagen in unseren verschiedenen Seiten. Aber anstatt die Wiederverwendung eines nav-Komponente auf jeder Seite, können wir hinzufügen, dass es hier und es wird präsentiert, konsequent auf jeder Seite:

<Vorlage>
<div>
<app-navigation />
<nuxt/>
</div>
</template>
<script>
import AppNavigation aus ‘~/components/AppNavigation.vue’

export default {
components: {
AppNavigation
}
}
</script>

Dies ist auch für uns großartig, weil es nicht rerender jedes mal die Seite neu geroutet. Es werden konsistent auf jeder Seite und, weil dieser, wir können keine plug in-unsere-Seite-transition hooks, aber stattdessen können wir bauen unsere eigenen mit dem, was wir gebaut zwischen Vuex und der Middleware.

Schritt Vier: Erstellen unsere Übergänge in der Navigation-Komponente

Jetzt können wir bauen, die navigation, aber ich bin auch eine SVG zu machen hier eine kleine demo, in der grundlegende Funktionen wir implementieren für eine größere Anwendung

<Vorlage>
<nav>
<h2>Einfache Transition-Gruppe Für das Layout: {{ page }}</h2>
<!–einfache navigation, verwenden wir nuxt-link für das routing von links–>
<ul>
<nuxt-link genau zu=”/”><li>index</li></nuxt-link>
<nuxt-link=”/about”><li>rund</li></nuxt-link>
<nuxt-link=”/user”><li>Benutzer</li></nuxt-link>
</ul>
<br>
<!–wir verwenden die Seite zu aktualisieren, die Klasse mit einer bedingten–>
<svg :class=”{ ‘active’ : (Seite = = = “über”) } ” xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ viewBox=”0 0 447 442″>
<!– wir verwenden die transition-Gruppe-Komponente, brauchen wir einen g-tag, weil es SVG–>
<transition-group name=”Liste” tag=”g”>
<rect class=”items ” rect” ref=”rect” key=”rect” width=”171″ height=”171″/>
<circle class=”items circ” key=”circ” id=”Profil” cx=”382″ cy=”203″ r=”65″/>
<g class=”Artikel-text” id=”text” key=”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=”Elemente der Fußzeile” key=”footer” id=”footer” y=”423″ width=”155″ height=”19″ rx=”9.5″ ry=”9.5″/>
</transition-Gruppe>
</svg>
</nav>
</template>
<script>
import { mapState } aus ‘vuex’

export default {
berechnet: mapState([‘Seite’])
}
</script>

Wir sind dabei ein paar Dinge hier. In dem Skript, wir bringen Sie in den Namen der Seite zu speichern, wie eine berechnete Wert. mapState uns bringt etwas anderes aus dem laden, die nützlich später, wenn wir viel Informationen für den Benutzer.

In der Vorlage haben wir eine regelmäßige nav mit nuxt-links, das ist, was wir verwenden für die Weiterleitung der links in Nuxt. Wir haben auch Klasse, die wird aktualisiert, auf einer Bedingung basiert auf der Seite (es wird sich ändern .aktiv, wenn es die about-Seite.

Wir sind auch über die <transition-Gruppe> – Komponente, um eine Reihe von Elementen, ändern Positionen. Die <transition-Gruppe> – Komponente ist ein bisschen magisch, weil es gilt, die Konzepte der FLIP unter der Haube. Wenn Sie habe gehört, der FLIP vor, du bist super aufgeregt, um dieses zu hören, weil Sie eine sehr performante Art und Weise zu animieren, auf dem web, aber dauert in der Regel eine Menge von Berechnungen zu implementieren. Wenn Sie noch nicht davon gehört FLIP, bevor, es ist auf jeden Fall gut zu Lesen, um zu verstehen, wie es funktioniert, und was vielleicht noch wichtiger ist, all die Sachen, die Sie nicht mehr haben zu tun, um diese Art von Effekt arbeiten! Kann ich ein “Hell yeah!”

Hier ist die CSS, dass macht diese Arbeit. Wir haben im Grunde Zustand, wie wir möchten, alle Elemente positioniert werden, die “aktiv” – Haken, die wir gemacht haben. Dann wir sagen, die Elemente zu haben, die einen übergang angewendet, wenn sich etwas ändert. Sie werden bemerken, ich bin mit 3D-Transformationen, auch wenn ich mich nur bewegen etwas, die entlang einer X-oder Y-Achse, weil-Transformationen sind besser für die performance als die ” oben/Links/Rand für die Verringerung der Farbe und ich möchte die hardware-Beschleunigung aktivieren.

.Artikel,
.Liste-bewegen {
transition: all 0.4 s ease;
}

.active {
füllen: #e63946;
.rect {
transform: translate3d(0, 30px, 0);
}
.circ {
transform: translateX(30px, 0, 0) scale(0.5);
}
.text {
transform: rotate(90deg) scaleX(0.08) translate3d(-300px, -35px, 0);
}
.footer {
transform: translateX(100px, 0, 0);
}
}

Hier ist eine reduzierte codepen ohne die Seite übergänge, aber nur um zu zeigen, die Bewegung:

Finden Sie die Pen-layout-übergang-Gruppe von Sarah Drasner (@sdras) auf CodePen.

Ich möchte darauf hinweisen, dass alle Implementierungen, die ich hier verwende, sind Entscheidungen, die ich gemacht habe, für die Platzierung und Bewegung – Sie kann wirklich jeden Effekt, den Sie mögen! Ich bin die Wahl SVG hier, weil es kommuniziert das Konzept des Layouts in einer kleinen Menge von code, aber Sie brauchen nicht zu verwenden, SVG. Ich bin auch übergänge statt animation, weil, wie die deklarative, Sie sind von Natur aus – Sie sind im wesentlichen besagt: “ich will, dass dieses neu positioniert werden hier, wenn diese Klasse wird umgeschaltet in Vue”, und dann der übergang ist nur die eine Aufgabe ist die Beschreibung der Bewegung, wie sich etwas ändert. Dies ist ideal für diesen Fall, weil es sehr flexibel ist. Ich kann dann entscheiden, zu ändern, um andere bedingte Platzierung und es wird immer noch funktionieren.

Super!!! Das wird sich jetzt geben uns die Wirkung, glatt wie butter zwischen den Seiten, und wir können immer noch geben Sie den Inhalt der Seite eine nette kleine Umstellung:

.page-enter-active {
transition: opacity 0.25 s ease-out;
}

.Seite-verlassen-active {
transition: opacity 0.25 s ease-in;
}

.page-enter,
.Seite-verlassen-active {
Deckkraft: 0;
}

Außerdem habe ich in einem der Beispiele aus der Nuxt Website zu zeigen, können Sie immer noch interne Animationen innerhalb der Seite:

Ansicht GitHub Repo

Ok, das funktioniert für eine kleine demo, aber “jetzt gilt es, etwas mehr “real world”, wie unser Beispiel von vorher. Nochmal, die demo-Website ist hier, und der repo-mit der gesamte code ist hier.

Es ist das gleiche Konzept:

  • Wir speichern den Namen der Seite in der Vuex-Shop.
  • Middleware begeht eine mutation zu lassen, den laden kennen die Seite geändert hat.
  • Wir wenden eine spezielle Klasse pro Seite und nest übergänge für jede Seite.
  • Die navigation bleibt konsistent auf jeder Seite aber wir haben unterschiedliche Positionen und gelten einige übergänge.
  • Der Inhalt der Seite hat Sie einen subtilen übergang und wir bauen in einigen Interaktionen, basierend auf Benutzer-Ereignisse

Der einzige Unterschied ist, dass dies ein bisschen mehr beteiligt Umsetzung. Die CSS, die auf die Elemente angewandt wird dieselbe bleiben, in der Navigations-Komponente. Können wir dem browser mitteilen, welche position wir wollen, dass alle Elemente werden in, und da gibt es eine transition angewendet, um das element an sich, dass der übergang angewandt wird, und es wird an die neue position bewegen jedes mal, wenn die Seite geändert hat.

// Animationen
.Platz {
.Folgen {
transform: translate3d(-215px, -80px, 0);
}
.Profil-photo {
transform: translate3d(-20px, -100px, 0) scale(0.75);
}
.Profil-name {
transform: translate3d(140px, -125px, 0) scale(0.75);
Farbe: weiß;
}
.Seite-icon {
transform: translate3d(0, -40px, 0);
hintergrund: rgba(255, 255, 255, 0.9);
}
.Kalender {
opacity: 1;
}
}

Das ist es! Wir halten Sie es nett und einfach und verwenden flexbox, grid-und absolut-Positionierung in einem relativen container zu vergewissern, dass alles übersetzt einfach über alle Geräte und wir haben nur sehr wenige media-Abfragen über dieses Projekt. Ich bin hauptsächlich mit CSS für die nav ändert, weil ich kann deklarativ Zustand der Platzierung der Elemente und deren übergänge. Für die Mikro-Interaktionen der user-driven-event, ich bin mit JavaScript und GreenSock, weil es mir erlaubt, zu koordinieren, die viel Bewegung sehr nahtlos und stabilisiert transform-origin-Browsern, aber es gibt so viele Möglichkeiten, die Sie umsetzen konnte. Es gibt eine million Möglichkeiten, die ich verbessern könnte dieses demo-Anwendung, oder erstellen, die Animationen, es ist ein schnelles Projekt, zeigen einige Möglichkeiten, die man in real-life-Kontext.

Denken Sie daran, um die hardware zu beschleunigen, und verwenden Sie verwandelt, und Sie können erreichen, einige schöne, native-ähnliche Effekte. Ich bin aufgeregt, um zu sehen, was Sie machen! Das web hat so viel Potenzial für eine schöne Bewegung, Platzierung und Interaktion, reduziert die kognitive Last für den Benutzer.