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 implementieren1. 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 erzielen1. Grundlegende Einführung in den Übergang
2. Übergangsklasse des ÜbergangsBeim Eintreten/Verlassen-Übergang findet ein Wechsel zwischen 6 Klassen statt:
3. ÜbergangsbeispielUmschließ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. AnimationsbeispieleUm 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
// 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 anWir können den Namen der Übergangsklasse über das folgende Attribut anpassen:
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
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 ':
<Übergangstyp='Animation'> <div v-if='show'>hallo</div> </Übergang> 8. Dauereigenschaft
<Ü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
Um Animationen mit js zu implementieren, können Sie JavaScript-Hooks im Übergangsattribut deklarieren:
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
/* 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
/* 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. ZustandsanimationAuch 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> ` });
ZusammenfassenDies 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:
|
<<: HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte
>>: Erfahrung in der Gestaltung einer mehrschichtigen Benutzeroberfläche im Webdesign
Inhaltsverzeichnis Die Fallstricke Füllmethode Wa...
1. Setzen Sie den HTML-Code der Maskenebene und d...
In diesem Artikel wird hauptsächlich erläutert, w...
1. Überprüfen Sie die Kali-Linux-Systemversion Be...
Hintergrund-Controller @RequestMapping("/get...
Inhaltsverzeichnis Eine Kastanie zum Abdecken Par...
In diesem Artikel wird der spezifische Code von j...
Tag-Typ (Anzeigemodus) HTML-Tags werden im Allgem...
【Frage】 Wenn die äußere und die innere Tabelle ve...
Laderegeln der Require-Methode Laden aus dem Cach...
Inhaltsverzeichnis Vorwort 1. Was ist ein Schloss...
serializable Serialisierung (kein Problem) Transa...
Für gleichmäßig verteilte Layouts verwenden wir i...
Heute ist das Springboot-Projekt des Unternehmens...
1. Finden Sie eine geeignete Version von Redis fü...