VueJS - Übergänge und Animationen

Einführung

Hallo da draußen, zukünftige Vue.js-Zauberer! ? Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise durch die magische Welt der Übergänge und Animationen in Vue.js zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen sagen, dass das Hinzufügen von flüssigen Übergängen und auffälligen Animationen zu Ihren Webanwendungen so ist, als würden Sie Streusel auf einen Cupcake geben – es macht alles leckerer!

Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind. Wir fangen ganz von vorne an und arbeiten uns hoch. Bis zum Ende dieses Tutorials werden Sie Animationen erstellen, die Ihre Freunde sagen lassen werden: "Wow, wie hast du das gemacht?" Also, tauchen wir ein!

Übergang

Was ist ein Übergang?

In der Welt der Webentwicklung ist ein Übergang wie ein sanfter Wechsel von einem Zustand in einen anderen. Stellen Sie sich einen Lichtschalter vor, der nicht abrupt an- und ausgeschaltet wird, sondern stattdessen allmählich heller oder dunkler wird. Das ist die Essenz eines Übergangs!

Beispiel für einen einfachen Übergang

Lassen Sie uns mit einem einfachen Beispiel beginnen. Wir erstellen eine Schaltfläche, die, wenn sie geklickt wird, eine Nachricht mit einem sanften Fade-Effekt anzeigt oder versteckt.

<template>
<div>
<button @click="show = !show">Umschalten</button>
<transition name="fade">
<p v-if="show">Hallo, ich bin eine übergehend Nachricht!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

Lassen Sie uns das auseinandernehmen:

1. Wir haben eine Schaltfläche, die die Variable show umschaltet, wenn sie geklickt wird.
2. Das <transition>-Komponente umgibt unsere Nachricht, mit einem name-Attribut gesetzt auf "fade".
3. Die v-if-Richtlinie im Absatz zeigt oder verbirgt ihn basierend auf der Variable show.
4. Im <style>-Abschnitt definieren wir unsere Übergangs-Klassen:

• .fade-enter-active und .fade-leave-active setzen die Übergangsdauer auf 0,5 Sekunden.
• .fade-enter und .fade-leave-to setzen die Anfangs- und End-Deckungkraft auf 0 (unsichtbar).

Wenn Sie die Schaltfläche klicken, wird die Nachricht sanft ein- und ausgeblendet. Ist das nicht toll?

Animation

Was ist der Unterschied zwischen Übergang und Animation?

Während Übergänge großartig für einfache Zustandsänderungen sind, erlauben Animationen komplexere, mehrstufige Effekte. Wenn ein Übergang wie das sanfte Dimmen eines Lichts ist, dann ist eine Animation wie ein Lichtshow mit vielen Farben und Mustern!

Beispiel für eine einfache Animation

Lassen Sie uns eine springende Ball-Animation erstellen:

<template>
<div>
<button @click="show = !show">Springen!</button>
<transition name="bounce">
<p v-if="show">?</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
</style>

In diesem Beispiel:

1. Wir verwenden das gleiche Schaltflächenumschaltmechanismus wie zuvor.
2. Das <transition>-Komponente hat nun den Namen "bounce".
3. Im <style>-Abschnitt definieren wir:

• .bounce-enter-active applies the bounce-in animation.
• .bounce-leave-active applies the same animation in reverse.
• Die @keyframes-Regel definiert unsere bounce-in-Animation mit drei Schritten.

Wenn Sie die Schaltfläche klicken, wird der Ball mit einem federnden Effekt appearieren und mit einem umgekehrten Bounce verschwinden. Spaß, oder?

benutzerdefinierte Übergangs-Klassen

Vue.js gibt uns die Flexibilität, benutzerdefinierte CSS-Klassen für unsere Übergänge zu verwenden. Dies ist super nützlich, wenn Sie Drittanbieter-CSS-Animationenbibliotheken wie Animate.css verwenden möchten.

Hier ist, wie Sie benutzerdefinierte Klassen verwenden können:

<template>
<div>
<button @click="show = !show">Animieren!</button>
<transition
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<p v-if="show">? Zu Unendlichkeit und darüber hinaus!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
/* Vorausgesetzt, wir haben Animate.css hier importiert */
</style>

In diesem Beispiel verwenden wir Animate.css-Klassen direkt in unserem <transition>-Komponente. Die enter-active-class und leave-active-class Attribute erlauben uns, benutzerdefinierte Klassen für die Ein- und Ausblendanimationen zu spezifizieren.

explizite Übergangsdauer

Manchmal möchten Sie möglicherweise explizit festlegen, wie lange ein Übergang oder eine Animation dauern soll. Vue.js lässt Sie das mit dem :duration-Prop tun:

<template>
<div>
<button @click="show = !show">Zeitlupe</button>
<transition :duration="1000">
<p v-if="show">Ich bewege mich in Zeitlupe...</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
}
}
</script>

<style>
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>

Hier setzen wir die Dauer auf 1000 Millisekunden (1 Sekunde) für beide Ein- und Ausblendübergänge. Sie können auch unterschiedliche Dauer für Ein- und Ausblendungen setzen:

<transition :duration="{ enter: 500, leave: 800 }">
<!-- ... -->
</transition>

JavaScript Hooks

Für mégaa mehr Kontrolle über Ihre Übergänge bietet Vue.js JavaScript Hooks. Diese sind wie kleine Helfer, die Ihnen erlauben, an bestimmten Punkten während eines Übergangs Code auszuführen.

Hier ist ein Beispiel:

<template>
<div>
<button @click="show = !show">Animieren</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<p v-if="show">? Ich werde von JavaScript kontrolliert!</p>
</transition>
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
console.log('Vor dem Eintreten');
},
enter(el, done) {
console.log('Eintreten');
done();
},
afterEnter(el) {
console.log('Nach dem Eintreten');
},
enterCancelled(el) {
console.log('Eintreten abgebrochen');
},
beforeLeave(el) {
console.log('Vor dem Verlassen');
},
leave(el, done) {
console.log('Verlassen');
done();
},
afterLeave(el) {
console.log('Nach dem Verlassen');
},
leaveCancelled(el) {
console.log('Verlassen abgebrochen');
}
}
}
</script>

Diese Hooks geben Ihnen präzise Kontrolle über den Übergangsprozess. Sie können sie verwenden, um andere Animationen auszulösen, Daten zu aktualisieren oder andere Aktionen an spezifischen Punkten während des Übergangs auszuführen.

Übergang bei der Initialen Renderung

Standardmäßig treten Übergänge in Vue.js nur auf, wenn ein Element in den DOM eingefügt oder daraus entfernt wird. Aber was, wenn Sie möchten, dass ein Element bei der initialen Renderung einen Übergang durchläuft? Vue.js hat Sie mit dem appear-Attribut abgedeckt:

<template>
<div>
<transition appear>
<p>? Ich erscheine mit einem Übergang!</p>
</transition>
</div>
</template>

<style>
.v-enter-active {
transition: all .3s ease;
}
.v-enter {
opacity: 0;
transform: translateY(-20px);
}
</style>

Mit dem appear-Attribut wird das Element bei der ersten Renderung des Komponenten mit einem Übergang angezeigt.

Animation auf Komponenten

Last but not least, lassen Sie uns über die Animation von Komponenten sprechen. Die gute Nachricht ist, dass Sie alle Übergangsfunktionen, die wir besprochen haben, auch auf Ihre benutzerdefinierten Komponenten anwenden können!

<template>
<div>
<button @click="toggleComponent">Wechseln Komponente</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
}
}
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>

In diesem Beispiel wechseln wir zwischen zwei Komponenten mit einem Fade-Übergang. Das mode="out-in"-Attribut stellt sicher, dass die alte Komponente ausblendet, bevor die neue Komponente einblendet.

Schlussfolgerung

Wow, wir haben viel Boden cobered! Von grundlegenden Übergängen bis hin zu komplexen Animationen, benutzerdefinierten Klassen bis hin zu JavaScript Hooks und sogar Animationen von Komponenten. Denken Sie daran, dass der Schlüssel zum Beherrschen dieser Konzepte die Übung ist. Also experimentieren Sie mit diesen Beispielen, mischen und kombinieren Sie verschiedene Techniken und vor allem: haben Sie Spaß!

Animationen und Übergänge können Ihre Vue.js-Anwendungen zum Leben erwecken. Es geht nicht nur darum, wie sie aussehen (obwohl das sicherlich ein Plus ist!) – sie können auch das Benutzererlebnis verbessern, indem sie visuelles Feedback bieten und Benutzer durch Ihre Anwendung führen.

Weitersuchen, weiter erstellen und bald werden Sie der Animationsexperte in Ihrem Entwicklungsteam sein. Viel Spaß beim Coden, zukünftige Vue.js-Meister! ?✨

Methode	Beschreibung
transition	Gibt ein Element oder eine Komponente ein, um Ein/Ausgangsübergänge anzuwenden
animation	Definiert eine wiederverwendbare Animation, die auf Elementen angewendet werden kann
enter-active-class	Spezifiziert eine benutzerdefinierte CSS-Klasse für den Eintrittsübergang
leave-active-class	Spezifiziert eine benutzerdefinierte CSS-Klasse für den Ausgangsübergang
:duration	Setzt die Dauer eines Übergangs
@before-enter	JavaScript-Hook, der aufgerufen wird, bevor der Eintrittsübergang beginnt
@enter	JavaScript-Hook, der aufgerufen wird, wenn der Eintrittsübergang beginnt
@after-enter	JavaScript-Hook, der aufgerufen wird, nachdem der Eintrittsübergang beendet ist
@enter-cancelled	JavaScript-Hook, der aufgerufen wird, wenn der Eintrittsübergang abgebrochen wird
@before-leave	JavaScript-Hook, der aufgerufen wird, bevor der Ausgangsübergang beginnt
@leave	JavaScript-Hook, der aufgerufen wird, wenn der Ausgangsübergang beginnt
@after-leave	JavaScript-Hook, der aufgerufen wird, nachdem der Ausgangsübergang beendet ist
@leave-cancelled	JavaScript-Hook, der aufgerufen wird, wenn der Ausgangsübergang abgebrochen wird
appear	Wendet einen Übergang bei der initialen Renderung eines Elements an
mode	Spezifiziert die Zeit der Ein/Ausgangsübergänge

Credits: Image by storyset