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

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

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

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20

Tutorial zum Herunterladen und Installieren von M...

HTML 5.1 lernen: 14 neue Features und Anwendungsbeispiele

Vorwort Wie wir alle wissen, gehört HTML5 dem Wor...

CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft

Die korrekte Verwendung der CSS-Float-Eigenschaft...

Detaillierte Erklärung zur Formatierung von Zahlen in MySQL

Aus beruflichen Gründen musste ich kürzlich Zahle...

Thumbnail-Hover-Effekt mit CSS3 implementiert

Ergebnisse erzielenImplementierungscode html <...

Kontext und Eigenschaften von React erklärt

Inhaltsverzeichnis 1. Kontext 1. Anwendungsszenar...

Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks

Im Linux-System gibt es einen Dateityp namens Lin...

Lösen Sie das Problem der Randzusammenführung

1. Die Ränder von Geschwisterelementen zusammenfü...

Empfehlen Sie mehrere MySQL-bezogene Tools

Vorwort: Mit der kontinuierlichen Entwicklung der...

Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI

1. BIOS überprüfen Überprüfen Sie zunächst, in we...

MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)

my.cnf ist die Konfigurationsdatei, die beim Star...

Einführung in den Aufbau eines DNS-Servers unter centos7

Inhaltsverzeichnis 1. Projektumgebung: 2: DNS-Ser...

Detaillierte Erklärung des this-Pointing-Problems von JavaScript-Prototypobjekten

Inhaltsverzeichnis 1. Dies deutet darauf hin 2. Ä...

Eine kurze Diskussion über Browserkompatibilitätsprobleme in JavaScript

Die Browserkompatibilität ist der wichtigste Teil...

js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

In diesem Artikel wird der spezifische Code von j...