Vue ist ein beliebtes Front-End-Framework und die Implementierung von Übergangsanimationen ist ein wichtiges Feature. In Vue kann die Verwendung von Übergangsanimationen den Benutzern eine benutzerfreundlichere Benutzererfahrung bieten. Als nächstes werde ich Ihnen vorstellen, wie Sie Übergangsanimationen in Vue implementieren.
1. Wissen Sie, was Übergangsanimation ist?
Unter Übergangsanimation versteht man einen Animationseffekt, der die Änderung sanfter und natürlicher erscheinen lässt, indem Übergangseffekte hinzugefügt werden, wenn ein DOM-Element von einem Zustand in einen anderen wechselt. In Vue können Übergangsanimationen auf die folgenden Szenarien angewendet werden:
-
Elemente ein- und ausblenden
-
Elemente dynamisch hinzufügen oder entfernen
-
Änderung der Elementposition
2. Implementierungsmethode der Vue-Übergangsanimation
2.1 CSS-Übergänge
Vue stellt transition Komponenten zur Unterstützung von Übergangsanimationen bereit. Wir können eine Komponente außerhalb des Elements einschließen, das eine Übergangsanimation anwenden muss transition , und den Effekt der Übergangsanimation realisieren, indem wir den CSS-Stil festlegen oder eine dynamische Klasse binden.
Die Übergangsanimationen von Vue werden durch Hinzufügen von CSS-Klassennamen implementiert. Wir können das Anzeigen und Ausblenden von Elementen steuern, indem wir Anweisungen für Elemente hinzufügen, die einen Übergang benötigen v-if , und dann Komponenten verwenden, um Animationseffekte festzulegen.v-showtransition
Lassen Sie mich ein Beispiel als Referenz schreiben. Ich werde der Schaltfläche einen Übergangsanimationseffekt hinzufügen:
<template>
<button @click="show=!show">Toggle</button>
<transition name="fade">
<div v-if="show">Hello, World!</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>In den obigen Codeideen verwenden wir Anweisungen für transition die umschlossenen Elemente, um das Anzeigen und Ausblenden von Elementen zu steuern. Gleichzeitig haben wir der Komponente eine Eigenschaft hinzugefügt und CSS-Stile verwendet, um den Effekt der Übergangsanimation zu definieren. Darunter repräsentieren und jeweils die Übergangsanimation beim Betreten und Verlassen und und repräsentieren den Stil des Elements beim Betreten bzw. Verlassen.div v-iftransition name .fade-enter-active.fade-leave-active .fade-enter.fade-leave-to
2.2 JS-Übergang
Zusätzlich zur Verwendung von CSS-Übergängen können in Vue auch JavaScript-Übergänge verwendet werden, um Animationseffekte zu erzielen. Der Vorteil des JS-Übergangs gegenüber dem CSS-Übergang besteht darin, dass Übergangsanimationen flexibler gesteuert werden können.
Im Gegensatz zum CSS-Übergang kann der Javascript-Übergang die Übergangsanimation flexibler steuern und reichhaltigere Effekte erzielen. Vue bietet Event-Hook-Funktionen, mit denen wir die Effekte von Übergangsanimationen anpassen können.
Die folgenden Event-Hook-Funktionen werden in Vue bereitgestellt:
-
before-enter -
enter -
after-enter -
enter-cancelled -
before-leave -
leave -
after-leave -
leave-cancelled
Wir können die Eigenschaften transition der Komponente verwenden mode , um den Übergangsmodus festzulegen. Wenn die Eigenschaft verwendet wird mode , ruft Vue automatisch die entsprechende Hook-Funktion auf, und wir können den Übergangseffekt über diese Hook-Funktionen anpassen.
Das Folgende ist eine Demo-Demo, die ich basierend auf dem JS-Übergang geschrieben habe. Wir werden der Schaltfläche eine benutzerdefinierte Übergangsanimation hinzufügen:
<template>
<button @click="show=!show">Toggle</button>
<transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="show">Hello, World!</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
el.style.transformOrigin = 'left';
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
translateX: [20, 0],
easing: 'easeInOutQuad',
duration: 500,
complete: done
});
},
leave(el, done) {
anime({
targets: el,
opacity: 0,
translateX: [-20, 0],
easing: 'easeInOutQuad',
duration: 500,
complete: done
});
}
}
};
</script> Auf der obigen Frontend-Seite haben wir den CSS-Übergang deaktiviert, indem wir die Eigenschaft transition der Komponente auf gesetzt haben, und dann haben wir Hook-Funktionen wie , und verwendet , um die Übergangsanimation anzupassen. In diesem Beispielcode verwenden wir die Animationsbibliothek eines Drittanbieters Anime.js, um den Animationseffekt beim Betreten und Verlassen des Elements zu realisieren. Gleichzeitig müssen wir nach Abschluss der Animation die Funktion manuell aufrufen, um Vue darüber zu informieren Die Übergangsanimation ist abgeschlossen.css false before-enterenter leaveanime done
3. Fassen Sie zusammen
Durch die Einleitung dieses Artikels, den ich geschrieben habe, können Sie mehr über das Grundkonzept der Vue-Übergangsanimation erfahren und lernen, wie Sie Übergangsanimationen in Vue implementieren. Ob die Verwendung von CSS-Übergängen oder JavaScript-Übergängen uns dabei helfen kann, Benutzern ein benutzerfreundlicheres Erlebnis zu bieten.