So verwenden Sie Vue zum Implementieren von CSS-Übergängen und Animationen

Inhaltsverzeichnis

1. Der Unterschied zwischen Übergang und Animation
2. Verwenden Sie Vue, um grundlegende CSS-Übergänge und Animationen zu implementieren

1. Animation
2. Übergang

3. Verwenden Sie das Übergangs-Tag, um Übergangs- und Animationseffekte einzelner Elemente/Komponenten zu erzielen

1. Grundlegende Einführung in den Übergang
2. Übergangsklasse des Übergangs
3. Übergangsbeispiel
4. Animationsbeispiele
5. Das Namensattribut des Übergangs
6. Passen Sie die Namen der Übergangsklassen an
7. Übergänge und Animationen gleichzeitig einrichten
8. Dauereigenschaft
9. Verwenden Sie js, um Animationen zu implementieren

4. Implementierung der Komponenten- und Elementwechselanimation

5. Listenanimation

6. Zustandsanimation

Zusammenfassen

1. Der Unterschied zwischen Übergang und Animation

Übergang: Wird normalerweise verwendet, um eine Änderung des Status eines Attributs eines Elements anzuzeigen.

Animation: Wird normalerweise verwendet, um die Bewegung von Elementen anzuzeigen.

2. Verwenden Sie Vue, um grundlegende CSS-Übergänge und Animationen zu implementieren

1. Animation

/* CSS */
@keyframes von links nach rechts {
    0% {
        transformieren: übersetzenX(-100px);
    }
    50 % {
        transformieren: übersetzenX(-50px);
    }
    100 % {
        transformieren: übersetzenX(0);
    }
}
.animation {
    Animation: von links nach rechts 3 s;
}

// js
const app = Vue.createApp({
    Daten() {
        zurückkehren {
            animieren:
                Animation: wahr
            }
        }
    },
    Methoden: {
        handleClick(){
            diese.animate.animation = !diese.animate.animation
        }
    },
    Vorlage: `
        <div :class='animate'>hallo</div>
        <button @click='handleClick'>Schalten</button>
    `
});

2. Übergang

/* CSS */
.Übergang {
    Übergang: Hintergrundfarbe 3 s linear 0 s;
}
 
.Gold {
    Hintergrundfarbe: Gold;
}
 
.cyan {
    Hintergrundfarbe: Cyan;
}

// js
const app = Vue.createApp({
    Daten() {
        zurückkehren {
            animieren:
                Übergang: wahr,
                Gold: wahr,
                Cyan: falsch
            }
        }
    },
    Methoden: {
        handleKlick() {
            dies.animate.gold = !dieses.animate.gold;
            dies.animate.cyan = !dieses.animate.cyan;
        }
    },
    Vorlage: `
        <div :class='animate'>hallo</div>
        <button @click='handleClick'>Schalten</button>
    `
});

Das Obige wird durch Festlegen des Klassenattributs erreicht und kann auch durch Festlegen des Stilattributs erreicht werden:

/* CSS */
.Übergang {
    Übergang: Hintergrundfarbe 3 s linear 0 s;
}

// js
Daten() {
    zurückkehren {
        Übergang: 'Übergang',
        Stilobjekt: {
            Hintergrundfarbe: „Gold“
        }
    }
},
Methoden: {
    handleKlick() {
        wenn(dieses.styleObject.backgroundColor === 'gold'){
            dieses.styleObject.backgroundColor = "cyan";
        }anders{
            dieses.styleObject.backgroundColor = "gold";
        }
    }
},
Vorlage: `
    <div :class='transition' :style='styleObject'>hallo</div>
    <button @click='handleClick'>Schalten</button>
`

3. Verwenden Sie das Übergangs-Tag, um Übergangs- und Animationseffekte einzelner Elemente/Komponenten zu erzielen

1. Grundlegende Einführung in den Übergang

Das <transition> -Element fungiert als Übergangseffekt für ein einzelnes Element/eine einzelne Komponente.
<transition> wendet den Übergangseffekt nur auf den umschlossenen Inhalt an , ohne zusätzliche DOM-Elemente zu rendern oder in der überprüfbaren Komponentenhierarchie zu erscheinen .

2. Übergangsklasse des Übergangs

Beim Eintreten/Verlassen-Übergang findet ein Wechsel zwischen 6 Klassen statt:

v-enter-from: Definiert den Startzustand des Enter-Übergangs. Wird vor dem Einfügen des Elements wirksam und im nächsten Frame nach dem Einfügen des Elements entfernt.
v-enter-active: Definiert den Status, wenn der Enter-Übergang wirksam ist. Wird während der gesamten Eintrittsübergangsphase angewendet, bevor das Element eingefügt wird, und entfernt, nachdem der Übergang/die Animation abgeschlossen ist. Mit dieser Klasse können Eingangsübergangszeiten, Verzögerungen und Kurvenfunktionen definiert werden.
v-enter-to: Definiert den Endzustand des Enter-Übergangs. Wird einen Frame nach dem Einfügen des Elements wirksam (gleichzeitig wird v-enter-from entfernt) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist.
v-leave-from: Definiert den Startzustand eines Verlassensübergangs. Wird sofort wirksam, wenn ein Übergang zum Verlassen ausgelöst wird, und wird im nächsten Frame entfernt.
v-leave-active: Definiert den Status, wenn der Leave-Übergang wirksam ist. Wird während der gesamten Übergangsphase beim Verlassen angewendet, tritt sofort in Kraft, wenn der Übergang beim Verlassen ausgelöst wird, und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist. Mit dieser Klasse können Dauer, Verzögerung und Kurvenfunktion des Austrittsübergangs definiert werden.
v-leave-to: Der Endzustand des Verlassensübergangs. Wird einen Frame nach dem Auslösen des Übergangs zum Verlassen wirksam (gleichzeitig wird v-leave-from entfernt) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist.

3. Übergangsbeispiel

Umschließen Sie die Elemente, die einen Übergang benötigen, mit dem Übergangstag. Legen Sie die für den Übergang erforderliche Klasse fest. Sie können aus den oben genannten sechs Klassen wählen.

/* CSS */
/* .v-enter-from {
    Deckkraft: 0;
}
.v-enter-active {
    Übergang: Deckkraft 1 Sekunde;
}
.v-eingeben-zu {
    Deckkraft: 1;
}
.v-verlassen-von {
    Deckkraft: 1;
}
.v-aktiv lassen {
    Übergang: Deckkraft 1 Sekunde;
}
.v-verlassen-zu {
    Deckkraft: 0;
} */
/* Abkürzung */
.v-eintreten-von, .v-verlassen-bis{
    Deckkraft: 0;
}
.v-enter-active, .v-leave-active{
    Übergang: Deckkraft 1 Sekunde;
}

// js
const app = Vue.createApp({
    Daten() {
        zurückkehren {
            zeigen: wahr
        }
    },
    Methoden: {
        handleKlick() {
            dies.show = !diese.show;
        }
    },
    Vorlage: `
        <Übergang>
            <div v-if='show'>hallo</div>
        </Übergang>
        <button @click='handleClick'>Schalten</button>
    `
});

4. Animationsbeispiele

Um den Animationseffekt zu verwenden, müssen Sie nur den CSS-Teil ändern, der JS-Teil bleibt unverändert.

/* CSS */
@keyframes shake-in {
    0% {
        transformieren: übersetzenX(-50px);
    }
    50 % {
        transformieren: übersetzenX(50px);
    }
    100 % {
        transformieren: übersetzenX(0px);
    }
}
@Keyframes ausschütteln {
    0% {
        transformieren: übersetzenX(50px);
    }
    50 % {
        transformieren: übersetzenX(-50px);
    }
    100 % {
        transformieren: übersetzenX(0px);
    }
}
.v-enter-active{
    Animation: Shake-In, 1 s Einschwingen;
}
.v-leave-active{
    Animation: Ausschütteln, 1 s, langsames Ein- und Aussteigen;
}

5. Das Namensattribut des Übergangs

Name - Zeichenfolge: Wird verwendet, um automatisch den Namen der CSS-Übergangsklasse zu generieren. Wenn nicht angegeben, ist der Standardwert v.
Wenn der Name auf hy gesetzt ist, sollte der entsprechende Klassenname ebenfalls so geändert werden, dass er mit hy beginnt.

// js
<Übergangsname='hy'>
    <div v-if='show'>hallo</div>
</Übergang>

/* CSS */
.hy-enter-from, .hy-leave-to{
    Deckkraft: 0;
}
.hy-enter-active, .hy-leave-active{
    Übergang: Deckkraft 1 Sekunde;
}

6. Passen Sie die Namen der Übergangsklassen an

Wir können den Namen der Übergangsklasse über das folgende Attribut anpassen:

aus der Klasse kommen
Aktive Klasse betreten
zum Unterricht eintreten
Beurlaubung vom Unterricht
Aktive Klasse verlassen
Unterricht verlassen

Sie haben eine höhere Priorität als normale Klassennamen, was nützlich ist, um das Übergangssystem von Vue mit anderen CSS-Animationsbibliotheken von Drittanbietern wie Animate.css zu kombinieren.

// Importieren Sie zuerst das Stylesheet <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="external nofollow" />
 
const app = Vue.createApp({
    Daten() {
        zurückkehren {
            zeigen: wahr
        }
    },
    Methoden: {
        handleKlick() {
            dies.show = !diese.show;
        }
    },
    // Fügen Sie eine Vorlage für den Animationsstil hinzu, indem Sie den Namen der Übergangsklasse anpassen: `
        <Übergangsname='hy' 
        Aktive Klasse eingeben = 'animieren__animiert animieren__hüpfen'
        leave-active-class='animieren__animiert animieren__abprallen'>
            <div v-if='show'>hallo</div>
        </Übergang>
        <button @click='handleClick'>Schalten</button>
    `
});

7. Übergänge und Animationen gleichzeitig einrichten

In einigen Szenarien müssen Sie Übergang und Animation für dasselbe Element gleichzeitig festlegen. Beispielsweise wird die Animation ausgelöst und schnell abgeschlossen, der Übergangseffekt ist jedoch noch nicht beendet.
In diesem Fall müssen Sie das Typattribut verwenden und die Animation oder den Übergang so festlegen, dass der Typ, auf den Vue hören soll, explizit deklariert wird.
Typ – Zeichenfolge. Geben Sie den Übergangsereignistyp an und warten Sie, bis der Übergang endet. Gültige Werte sind „Übergang“ und „Animation“. Standardmäßig erkennt Vue.js Ereignisse mit langer Dauer automatisch als Übergangsereignisse.

Wenn die Übergangszeit länger ist, hat die Verwendung von type='transiton' folgende Auswirkung:

Es ist festzustellen, dass die Animation zuerst abgeschlossen ist, der Übergang jedoch nicht beendet wird und vollständig ausgeführt wird, bevor das Element verschwindet.

/* CSS */
@keyframes shake-in {
    0% {
        transformieren: übersetzenX(-50px);
    }
 
    50 % {
        transformieren: übersetzenX(50px);
    }
 
    100 % {
        transformieren: übersetzenX(0px);
    }
}
 
@Keyframes ausschütteln {
    0% {
        transformieren: übersetzenX(50px);
    }
 
    50 % {
        transformieren: übersetzenX(-50px);
    }
 
    100 % {
        transformieren: übersetzenX(0px);
    }
}
 
.v-eingeben-von,
.v-verlassen-zu {
    Farbe: rot;
}
 
.v-enter-active {
    Animation: Shake-In, 1 s Einschwingen;
    Übergang: Farbe 3 s Einfädeln;
}
 
.v-enter-to, .v-leave-from {
    Farbe: grün;
}
 
.v-aktiv lassen {
    Animation: Ausschütteln, 1 s, langsames Ein- und Aussteigen;
    Übergang: Farbe 3 s, sanftes Ein-Aus;
}

// js
const app = Vue.createApp({
    Daten() {
        zurückkehren {
            zeigen: wahr
        }
    },
    Methoden: {
        handleKlick() {
            dies.show = !diese.show;
        }
    },
    Vorlage: `
        <Übergangstyp='Übergang'>
            <div v-if='show'>hallo</div>
        </Übergang>
        <button @click='handleClick'>Schalten</button>
    `
});

Wenn die Übergangszeit länger ist, verwenden Sie type='animation ':

Sie werden feststellen, dass der Übergang sofort endet und das Element verschwindet, nachdem die Animation abgeschlossen ist.

<Übergangstyp='Animation'>
    <div v-if='show'>hallo</div>
</Übergang>

8. Dauereigenschaft

Dauer – Zahl | {Eingabe: Zahl, Verlassen: Zahl}: Gibt die Dauer des Übergangs an.
Es hat eine höhere Priorität als die in CSS festgelegte Zeit.
Die Einheit ist: ms.

<Übergang: Dauer = '100' >
    <div v-if='show'>hallo</div>
</Übergang>

Außerdem können Sie die Dauer des Ein- und Ausstiegs individuell anpassen:

<transition :duration='{ Eingabe: 1000, Verlassen: 3000 }' >
    <div v-if='show'>hallo</div>
</Übergang>

9. Verwenden Sie js, um Animationen zu implementieren

Wenn Sie nur mit JavaScript wechseln, müssen Sie den Done-Callback in den Enter- und Leave-Hooks verwenden. Andernfalls werden sie synchron aufgerufen und der Übergang wird sofort abgeschlossen.
Durch das Hinzufügen von :css="false" wird Vue auch die CSS-Erkennung überspringen. Dies führt nicht nur zu einer etwas höheren Leistung, sondern kann auch die Auswirkungen von CSS-Regeln während des Übergangsprozesses vermeiden.

Um Animationen mit js zu implementieren, können Sie JavaScript-Hooks im Übergangsattribut deklarieren:

@before-enter="vorEintreten"	Vor der Umstellung
@enter="Eingeben"	Beim Eintritt in den Übergang
@after-enter="nachEingabe"	Nach dem Eintritt in den Übergang
@enter-cancelled="EingabeAbgebrochen"	Wenn der Eintrittsübergang unterbrochen wird
@before-leave="vorVerlassen"	Vor dem Verlassen des Übergangs
@leave="verlassen"	Beim Verlassen des Übergangs
@after-leave="nachVerlassen"	Nach dem Verlassen des Übergangs
@leave-cancelled="VerlassenAbgebrochen"	Wenn der Austrittsübergang unterbrochen wird

const app = Vue.createApp({
    Daten() {
        zurückkehren {
            zeigen: wahr
        }
    },
    Methoden: {
        handleKlick() {
            dies.show = !diese.show;
        },
        handleBeforeEnter(el){
            el.style.color = "rot";
        },
        handleEnter(el, fertig){
            const timer = setzeInterval(()=>{
                wenn(el.style.color === 'rot'){
                    el.style.color = "blau";
                }anders{
                    el.style.color = "rot";
                }
            }, 1000);
            setzeTimeout(()=>{
                Intervall löschen(Timer);
                // Markierung für Ende der Animation // Wenn done() nicht ausgeführt wird, wird handleAfterEnter done() nicht ausführen;
            }, 3000)
        },
        handleAfterEnter(el){
            console.log('Erfolg');
        }
    },
    Vorlage: `
        <Übergang: css = "falsch"
        @before-enter='handleVorEingabe'
        @enter='handleEingabe'
        @after-enter='handleAfterEnter'
        >
            <div v-if='show'>hallo</div>
        </Übergang>
        <button @click='handleClick'>Schalten</button>
    `
});

// js
const app = Vue.createApp({
    Komponenten: ['Element-A', 'Element-B'],
    Daten() {
        zurückkehren {
            Komponente: „Element-A“
        }
    },
    Methoden: {
        handleKlick() {
            wenn (diese.Komponente === 'Element-a') {
                diese.Komponente = "Element-b";
            } anders {
                diese.Komponente = "Element-a";
            }
        }
    },
    Vorlage: `
        <Übergangsmodus='raus-rein' erscheinen>
            <Komponente: ist = "Komponente" />
        </Übergang>
        <button @click='handleClick'>Schalten</button>
    `
});
app.component('item-a', {
    Vorlage: `<div>Hallo</div>`
});
app.component('item-b', {
    Vorlage: `<div>Tschüss</div>`
});

4. Implementierung der Komponenten- und Elementwechselanimation

Modus – Zeichenfolge. Steuert den Zeitpunkt der Verlassens-/Betretensübergänge.
Gültige Modi sind „Out-In“ und „In-Out“, die Standardeinstellung ist gleichzeitig.
Sie können den anfänglichen Rendering-Übergang des Knotens über das Attribut „apple“ festlegen.

/* CSS */
.v-eingeben-von,
.v-verlassen-zu {
    Deckkraft: 0;
}
 
.v-enter-active,
.v-aktiv lassen {
    Übergang: Deckkraft 1 s Einblendung;
}
 
.v-eingeben-zu,
.v-verlassen-von {
    Deckkraft: 1;
}

// js
const app = Vue.createApp({
    Komponenten: ['Element-A', 'Element-B'],
    Daten() {
        zurückkehren {
            Komponente: ‚Element-A‘
        }
    },
    Methoden: {
        handleKlick() {
            wenn (diese.Komponente === 'Element-a') {
                diese.Komponente = "Element-b";
            } anders {
                diese.Komponente = "Element-a";
            }
        }
    },
    Vorlage: `
        <Übergangsmodus='raus-rein' erscheinen>
            <Komponente: ist = "Komponente" />
        </Übergang>
        <button @click='handleClick'>Schalten</button>
    `
});
app.component('item-a', {
    Vorlage: `<div>Hallo</div>`
});
app.component('item-b', {
    Vorlage: `<div>Tschüss</div>`
});

5. Listenanimation

Mithilfe der Komponente <transition-group> kann die gesamte Liste gleichzeitig gerendert werden.
Innere Elemente müssen immer einen eindeutigen Schlüsselattributwert bereitstellen.
CSS-Übergangsklassen werden auf die inneren Elemente angewendet, nicht auf die Gruppe/den Container selbst.
Die Komponente <transition-group> verfügt noch über eine weitere Besonderheit. Dabei können nicht nur Ein- und Ausstiege animiert werden, sondern auch die Positionierung verändert werden. Um diese neue Funktionalität zu nutzen, verwenden Sie einfach die neu hinzugefügte V-Move-Klasse.

/* CSS */
.inline-block {
    Anzeige: Inline-Block;
    Rand rechts: 10px;
}
 
.v-eingeben-von,
.v-verlassen-zu {
    Deckkraft: 0;
    transformieren: übersetzenY(30px);
}
 
.v-enter-active {
    Übergang: alle 1en leicht;
}
 
.v-aktiv lassen {
    Position: absolut;
}
 
.v-Bewegung {
    Übergang: alle 1en leicht;
}

6. Zustandsanimation

Auch bei den Datenelementen selbst lassen sich durch Veränderungen von Zahlen und Operationen, Farbdarstellung, SVG-Knotenposition, Elementgröße und weiteren Eigenschaften Animationseffekte erzielen.

Beispiel für Nummernänderungen :

const app = Vue.createApp({
    Daten() {
        zurückkehren {
            Anzahl: 1
        }
    },
    Methoden: {
        handleKlick() {
            const timer = setzeInterval(() => {
                wenn (diese.Zahl >= 10) {
                    Intervall löschen(Timer)
                }anders{
                    diese.Nummer++;
                }
            }, 100);
        }
    },
    Vorlage: `
        <div>{{Zahl}}</div>
        <button @click='handleClick'>Hinzufügen</button>
    `
});

Zusammenfassen

Dies ist das Ende dieses Artikels zur Verwendung von Vue zur Implementierung von CSS-Übergängen und -Animationen. Weitere relevante Inhalte zur Implementierung von CSS-Übergängen und -Animationen mit Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Informationen zum Fallstrickprotokoll der Vue3-Übergangsanimation
Vue implementiert eine Übergangsanimation beim Listen-Scrollen
Vue löst das Problem des Routing-Übergangsanimations-Jitters (detailliertes Beispiel)
Lösen Sie das Problem, dass die Übergangsanimation von Vue nicht normal implementiert werden kann
Detaillierte Erläuterung der Vue3-Übergangsanimation

<<: HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte

>>: Erfahrung in der Gestaltung einer mehrschichtigen Benutzeroberfläche im Webdesign

Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position

Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung auf das Erlernen der Front-End-Leistungsoptimierung.

Artikel

Artikel empfehlen

Verstehen Sie genau den Grund für die Meldung „Keine solche Datei oder kein solches Verzeichnis“ beim Ausführen einer Datei unter Linux.

1 Hintergrund Vor kurzem habe ich untersucht, wie...