Übergänge und Animationen spielen eine wichtige Rolle bei der Benutzererfahrung. Indem Sie subtile Animationen und Übergänge zwischen Elementen auf der Webseite hinzufügen, können Sie die Benutzererfahrung verbessern. Die Website wird viel glatter, ansprechender und allgemein besser erscheinen.

Dieses Tutorial zeigt, wie Sie Übergänge und Animationen in Vue.js implementieren. Sie lernen, wie Sie mit dem sowohl einfache Übergänge als auch komplexe Animationen erstellen Übergang Komponenten- und CSS-Keyframes.

Die Vue.js-Übergangskomponente

Vue.js hat eine eingebaute Übergang Komponente, mit der Sie Animationen in Ihrer App erstellen können. Diese Komponente umschließt das Zielelement, das wir animieren möchten.

Hier umschließt die Übergangskomponente den Header der ersten Ebene:

 Hallo </h1>
</transition>

Wenn Sie ein Element mit der Übergang Komponente, wendet die Komponente Übergangsklassen auf das Element an, das sie umschließt. Insgesamt gibt es sechs Übergangsklassen. Drei steuern die Animation des Elements beim Eintreten in die Seite. Die anderen drei steuern die Animation des Elements, wenn es die Seite verlässt.

Der in diesem Artikel verwendete Code ist in diesem verfügbar GitHub-Repository und steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.

Anwenden von Übergangsklassen, wenn Elements die Seite betritt

Während des Vorgangs des Elements, das in das DOM eintritt, wird die Übergang Komponente wendet die Klassen an enter-von, eintreten, Und enter-aktiv dazu. Mit diesen Klassen können Sie steuern, wie das Element animiert oder auf die Seite übertragen wird.

• enter-von: Wird auf das Element angewendet, bevor es in einen Browser gelangt. Sie verwenden diese Klasse, um den anfänglichen CSS-Zustand des Elements festzulegen.
• eintreten: Wird auf das Element angewendet, wenn es in den Browser gelangt. Sie verwenden diese Klasse, um den endgültigen CSS-Zustand des Elements festzulegen.
• enter-aktiv: Wird angewendet, während das Element von einem Zustand in einen anderen übergeht. Hier bestimmen Sie, wie lange die Umstellung dauern soll.

Sehen wir uns ein Beispiel an:

<Übergang>
 <h1> Halloh1>
Übergang>
.eingeben-von {
Opazität: 0;
}
.eintreten {
Opazität: 1;
}
.enter-aktiv {
Übergang: Opazität 2SLeichtigkeit;
}

Mit diesem Code benötigt der Level-One-Header zwei Sekunden, um von unsichtbar zu wechseln (Deckkraft: 0) bis vollständig sichtbar (Deckkraft: 1). Dieser Übergang erfolgt, wenn das Element in das DOM eintritt. Ohne den Übergang wäre der Text nach dem Laden der Seite sofort im Browser erschienen.

Anwenden von Übergangsklassen, wenn Elemente die Seite verlassen

Der Übergang Die Komponente unterstützt drei weitere Übergangsklassen, die Sie anwenden müssen, wenn das Element das DOM verlässt. Ihre Namen sind abfahren von, verlassen, um, Und urlaubsaktiv. Diese Klassen steuern, wie das Element animiert oder von der Seite übertragen wird.

Wie Sie vielleicht erraten haben, ähneln diese Klassen der eingeben- Klassen, die wir zuvor besprochen haben. Aber diese Klassen werden nur aktiviert, wenn das Element aus dem DOM ausgehängt wird. Mounten und Unmounten sind wichtige Konzepte des DOM. Als Entwickler sollten Sie über eine grundlegendes Verständnis des DOM und andere verwandte Konzepte.

Sehen wir uns ein Beispiel an:

<Übergang>
 <h1> Halloh1>
Übergang>
.abfahren von {
Opazität: 0;
}
.verlassen, um {
Opazität: 1;
}
.leave-aktiv {
Übergang: Opazität 2SLeichtigkeit;
}

In diesem Fall benötigt der Header der ersten Ebene zwei Sekunden, um langsam von sichtbar zu wechseln (Deckkraft: 1) zu unsichtbar (Deckkraft: 0). Dieser Übergang erfolgt, wenn das Element das DOM verlässt. Ohne den Übergang wäre der Text sofort aus dem Browser verschwunden.

Verwenden von Übergangsnamen

Sie können auch eine hinzufügen Name Attribut zu Ihrer Übergangskomponente. Wenn Sie dies tun, hängt Vue den Namen an Ihre Übergangsklassen an. Das bedeutet, dass Sie mehrere Übergänge auf Ihrer Seite haben können, jeder mit einzigartigen Übergangsklassen und CSS-Eigenschaften.

Zum Beispiel, wenn Sie den Namen festlegen verblassen auf Ihrer Übergangskomponente, dann wird allen Übergangsklassen das Präfix vorangestellt verblassen:

<ÜbergangName ="verblassen">
 <h1> Halloh1>
Übergang>
.fade-enter-from {
Opazität: 1;
}
.verblassen-von {
Opazität: 1;
}
// andere "eingeben" Und "verlassen" KlassenmitDieverblassenalsPräfix

Erstellen von Übergängen mit der Übergangskomponente

Um den Übergang in Vue.js zu demonstrieren, umschließen Sie eine H1 innerhalb der Übergang Komponente. Unterhalb, erstellen Sie eine Schaltfläche. Wenn auf diese Schaltfläche geklickt wird, wird die Variable umgeschaltet Titel anzeigen zwischen FALSCH Und WAHR.

Hier ist der Code:

Als nächstes definieren Sie die Skript Abschnitt. Dieser Abschnitt enthält die aufstellen Methode, in der Sie die initialisieren Titel anzeigen variabel mit FALSCH.