Übergangskomponente in Vue3: Implementierung von Komponentenübergangseffekten

Übergangskomponente in Vue3: Implementierung von Komponentenübergangseffekten

Vue3 ist eine brandneue Version, die kürzlich veröffentlicht wurde und viele Verbesserungen bei Leistung und Entwicklungserfahrung mit sich gebracht hat. Gleichzeitig bietet Vue3 auch mehr Features und Funktionen. Eine der wichtigen Funktionen ist die Übergangskomponente. In Vue3 kann die Übergangskomponente verwendet werden, um den Übergangseffekt von Komponenten zu implementieren und dadurch die Benutzeroberfläche reichhaltiger und lebendiger zu gestalten.

Was ist die Übergangskomponente?

In Vue3 ist die Übergangskomponente eine sehr nützliche Komponente, mit der Übergangseffekte zu Komponenten hinzugefügt werden können. Laienhaft ausgedrückt wird es beim Erscheinen und Verschwinden von Komponenten einige Animationseffekte geben. Dieser Animationseffekt kann ein- und ausgeblendet, vergrößert und verkleinert usw. werden, was sehr praktisch ist.

Verwenden Sie die Übergangskomponente, um einen Übergangseffekt zu erzielen

Um die Übergangskomponente zu verwenden, um einen Komponentenübergangseffekt zu erzielen, müssen wir zunächst einige grundlegende Wissenspunkte beherrschen. Der erste ist die grundlegende Verwendung der Übergangskomponente. Das Folgende ist ein Codebeispiel für die grundlegende Verwendung:

<template>
    <transition name="fade">
        <div v-if="show">我是一个div组件</div>
    </transition>
    
    <button @click="toggleShow">切换组件</button>
</template>

<script>
export default {
    data() {
        return {
            show: true
        };
    },
    
    methods: {
        toggleShow() {
            this.show = !this.show;
        }
    }
}
</script>

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

Im obigen Code definieren wir zuerst eine Übergangskomponente und dann eine div-Komponente in der Übergangskomponente. Diese div-Komponente wird nur angezeigt, wenn show wahr ist. Im Folgenden finden Sie eine Erläuterung des Codes:

• definiert ein Attribut mit dem Namen „fade“ im Übergangs-Tag. Dieses Attribut gibt an, dass während des Animationsprozesses das Präfix „fade-“ zum CSS-Klassennamen hinzugefügt wird. Die detaillierte Beschreibung der CSS-Klassennamen wird später besprochen.
• Beurteilen Sie den Wert von show in v-if. Wenn es wahr ist, wird es angezeigt, wenn es falsch ist, wird es ausgeblendet.
• Im Stil definieren wir Klassen mit den Namen „fade-enter“, „fade-leave-to“, „fade-enter-active“ und „fade-leave-active“. Diese Klassennamen bestehen aus dem Namen „fade“, den wir im Attribut definiert haben, plus einem Präfix.
• Wenn die Komponente von ausgeblendet in angezeigt wechselt, fügt Vue der Komponente automatisch den Klassennamen „fade-enter“ hinzu. Zu diesem Zeitpunkt können wir den Anfangsstatus der Komponente über CSS festlegen. Auf die gleiche Weise fügt Vue der Komponente automatisch den Klassennamen „fade-leave-to“ hinzu, wenn sich eine Komponente von „angezeigt“ in „ausgeblendet“ ändert. Zu diesem Zeitpunkt können wir den endgültigen Status der Komponente über CSS festlegen.
• Setzen Sie die CSS-Übergangseigenschaft auf „fade-enter-active“ und „fade-leave-active“, was die Dauer der Animation darstellt. Hier stellen wir es auf 0,5 Sekunden ein.
• Durch die oben genannten Schritte haben wir der Div-Komponente erfolgreich einen Fade-Übergangseffekt hinzugefügt.

CSS-Klassenname der Übergangskomponente

Im obigen Code haben wir die Klassennamen „fade-enter“, „fade-leave-to“, „fade-enter-active“ und „fade-leave-active“ verwendet. ". Diese Klassennamen sind in die Übergangskomponente integriert, wir müssen ihr Präfix jedoch entsprechend dem Namensattribut des Übergangs festlegen. Wenn Vue den Eintritt oder Austritt eines Elements erkennt, fügt es der Reihe nach die folgenden Klassennamen hinzu:

• [Name]-enter: der Startzustand des Eintritts. Dieser Klassenname wird dem Element hinzugefügt, sobald es dem DOM hinzugefügt wird.
• [Name]-enter-active: Eintritt in den Übergangszustand. Dieser Klassenname wird dem Element sofort nach Eintritt in den Status hinzugefügt.
• [Name]-enter-to: Der Endstatus der Eingabe. Dieser Klassenname wird dem Element am Ende des Eintragsstatus hinzugefügt.
• [name]-leave: Der Ausgangszustand des Verlassens. Dieser Klassenname wird dem Element hinzugefügt, sobald es das DOM verlässt.
• [name]-leave-active: Übergangszustand verlassen. Dieser Klassenname wird dem Element unmittelbar nach Ende des Exit-Status hinzugefügt.
• [name]-leave-to: Der Endzustand des Verlassens. Dieser Klassenname wird dem Element am Ende des Urlaubsstatus hinzugefügt.

Anhand dieser Klassennamen können wir den Anfangs-, Zwischen- und Endzustand des Übergangseffekts für die Komponente definieren.

Zusammenfassung

In Vue3 ist die Übergangskomponente die Basiskomponente, die zum Erzielen von Komponentenübergangseffekten verwendet wird. Sie ermöglicht es uns, den Komponenten einige reichhaltige visuelle Effekte hinzuzufügen und so das interaktive Erlebnis des Benutzers zu verbessern. Bei der Verwendung der Übergangskomponente müssen wir zunächst die grundlegenden Verwendungsmethoden und zugehörigen CSS-Klassennamen beherrschen, damit wir sie in tatsächlichen Projekten nutzen können.

Das obige ist der detaillierte Inhalt vonÜbergangskomponente in Vue3: Implementierung von Komponentenübergangseffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!