11.1 Was behandeln wir in dem Kapitel?

Überblick

Vue.js bietet verschiedene Möglichkeiten, sogenannte Übergangseffekte anzuwenden, wenn Elemente in der Webseite bzw. dem DOM eingefügt, aktualisiert oder entfernt werden. Diese sogenannte Transition (lat. „transitio“ = „Übergang“, Substantiv zu „transire“ = „hinübergehen“) bedeutet allgemein „Wandel“, „Wechsel“ oder „Umbruch“ oder eben auch Übergang von einem Zustand in einen anderen und erlaubt die Gestaltung von „smarten“ grafischen Oberflächen, wie man sie heute bereits in jeder x-beliebigen Webseite findet. Also beispielsweise das animierte bzw. zeitgesteuerte Einblenden oder Ausblenden von Elementen über die Veränderung der Transparenz, das Vergrößern oder Verkleinern von Elementen, das Skalieren oder Verschieben und ähnliche Dinge. Diese Effekte werden in modernen Zeiten sicher keinen Anwender mehr beeindrucken oder überraschen, aber sie gehören bei zeitgemäßen grafischen Oberflächen irgendwie dazu, um keinen negativen Eindruck zu hinterlassen. Deshalb muss auch ein eher auf die Datenbindung spezialisiertes Framework wie Vue.js entsprechende Unterstützung bereitstellen.

Zu diesem Behuf

  • wendet Vue.js im Hintergrund CSS-Klassen automatisch für CSS-Übergänge und -Animationen an,

  • integriert bei Bedarf CSS-Animationsbibliotheken von Drittanbietern wie Animate.css,

  • verwendet direkt JavaScript, um den DOM-Baum während Übergangshaken direkt zu bearbeiten oder

  • integriert bei Bedarf JavaScript-Animationsbibliotheken von Drittanbietern, z. B. Velocity.js.

Die meisten Effekte, die man hier über Vue.js anwenden kann, basieren also unmittelbar auf den gewöhnlichen CSS-Animationen und -Übergängen, üblichen DOM-Manipulationen aus dem DHTML-Umfeld oder Fremdtechnologien und werden zudem so oder so ähnlich von allen derzeit modernen Web-Frameworks angeboten.

11.2 Übergänge mit transition

Um einzelne Elemente oder Komponenten animiert zu wechseln, bietet Vue.js eine „Übergangshüllungskomponente“, deren Name sich aus „Transition“ ergibt. Man arbeitet dort auf Basis des transition-Elements, mit der Sie für jedes Element oder jede Komponente Übergänge beim Erscheinen oder Verlassen spezifizieren können. Das kann in den folgenden Kontexten erfolgen:

  • Beim bedingten Anzeigen (mit v-show)

  • Beim bedingten Rendern (mit v-if)

  • Bei dynamischen Komponenten

  • Auf Komponenten-Stammknoten

Das klingt abstrakter und vielleicht auch komplizierter als es ist. Betrachten Sie das folgende Beispiel (trans1.html):

In dem HTML-Code finden Sie ein transition-Element mit einem eingeschlossenen Absatz samt Text. Der Absatz wird mittels einer v-if-Direktive bedingt angezeigt oder ausgeblendet. Und dieser Übergang soll animiert erfolgen. Dazu wird mit dem name-Attribut der Wert fade zugeordnet. Das steht für „verblassen“, was man durch die Änderung der Transparenz erreichen kann. Aber der Wert von name kann frei gewählt werden.

<!DOCTYPE html> <html>   <head>     <title>Tansition</title>     <meta charset="uft-8" />     <link rel="stylesheet" type="text/css" href="lib/css/trans1.css" />     <script src=https://cdn.jsdelivr.net/npm/vue/dist/vue.js         type="text/javascript" ></script>   </head>   <body>     <h1>Effekte bei Tansition</h1>     <div id="info">       <button v-on:click="show = !show">Toggle Text</button>       <transition name="fade">         <p v-if="show">None shall pass</p>       </transition>     </div>   <script src="lib/js/trans1.js" type="text/javascript"     charset="utf-8"></script>   </body> </html>

Das ist nun die Syntax der JavaScript-Datei trans1.js:

var info = new Vue({     el: '#info',     data: {         show: true     } });

Dort ist neben der üblichen Erzeugung eines Vue-Objekts nur von Interesse, dass beim Attribut data die Eigenschaft show den Wert true hat. Das sorgt nur dafür, dass beim Laden der Webseite der Absatz mit dem Text erst einmal angezeigt wird (Abb. 11.1). Das ist das übliche bedingte Rendern von Teilen der Webseite durch Vue.js.

Abb. 11.1
figure 1

Die Webseite vor dem animierten Übergang

Full size image

Nun wird in der Webseite aber auch eine CSS-Datei trans1.css eingebunden und deren Aufbau ist zum Teil von Interesse für die Übergangseffekte.

body {   background: lightgray; color: blue; } h1, h2, h3, h4 {   text-align: center;   padding: 5px; margin: 5px;   box-shadow: #111 3px 2px; border-radius: 5px;   background: white; } div {   padding: 5px; margin: 5px;   box-shadow: #111 3px 2px; border-radius: 5px;   background: white; color: red; }  .fade-enter-active, .fade-leave-active {   transition: opacity 1.5s; }  .fade-enter, .fade-leave-to {   opacity: 0; }

Die Klassen in der CSS-Datei bestimmen, wie der fade-Effekt abläuft. Der Wert transition gibt an, was für eine CSS-Eigenschaft animiert wird (in dem Fall opacity) und wie lange die Animation läuft (die Duration ), was in dem Beispiel 1,5 s sind.

Ebenso wird der Zielwert am Ende des Übergangs spezifiziert. In dem Fall ist die Transparenz dann nach 1,5 s auf 0 gesetzt worden. Danach wird das ganze Element aus der Webseite entfernt (Abb. 11.2).

Abb. 11.2
figure 2

Die Text ist nach dem animierten Übergang verschwunden

Full size image

Hier läuft im Hintergrund wieder einiges an Magie durch das Framework ab. Aber im Gegensatz zu den meisten Zaubertricks von Zirkusmagiern kann man durchaus nachvollziehen, wie die „Magie“ funktioniert. Wenn ein in eine Übergangskomponente eingeschlossenes Element eingefügt oder entfernt wird, geschieht Folgendes:

  • Vue,js erkennt durch die Zuordnung eines Wert bei name automatisch, ob auf das Zielelement CSS-Übergänge oder -Animationen angewendet werden. In diesem Fall werden passend benannte CSS-Übergangsklassen zu geeigneten Zeitpunkten hinzugefügt oder entfernt. Deren Namen ergeben sich durch den Namen des Übergangseffekts und Zustandsbeschreibungen.

  • Wenn die Übergangskomponente JavaScript-Hooks bereitstellt, werden diese Hooks zu geeigneten Zeitpunkten aufgerufen.

  • Wenn keine CSS-Übergänge oder -Animationen erkannt und keine JavaScript-Hooks bereitgestellt werden, werden die DOM-Vorgänge zum Einfügen und/oder Entfernen sofort beim nächsten Browser-Animationsframe ausgeführt.

11.3 Die Übergangsklassen

Wie gerade angesprochen, nutzt Vue.js CSS-Übergangsklassen im Hintergrund. Es gibt in Vue.js standardmäßig sechs Klassen für den Beginn und das Ende von Übergängen:

  • Die Klasse v-enter ist der Startzustand für den Hook enter. Die Klasse wird vom Framework vor dem Einfügen des Elements hinzugefügt und nach dem Einfügen eines Elements wieder entfernt.

  • Die Klasse v-enter-active bezeichnet den aktiven Status für enter. Die Klasse wird während der gesamten Einstiegsphase angewendet. Dazu wird sie vor dem Einfügen des Elements hinzugefügt und nach Abschluss des Übergangs bzw. der Animation wieder entfernt. Diese Klasse kann verwendet werden, um die Dauer, die Verzögerung und die Beschleunigungskurve für den eintretenden Übergang zu definieren.

  • Die Klasse v-enter-to wurde in den Versionen 2.1.8 von Vue.js hinzugefügt und spezifiziert den Endzustand für enter. Dabei wird ein Frame hinzugefügt, nachdem das Element eingefügt wurde und gleichzeitig wird die Klasse v-enter entfernt. Wird der Übergang oder die Animation beendet, wird die Klasse wieder entfernt.

  • Die Klasse v-leave spezifiziert den Startzustand für das Verlassen. Sie wird sofort hinzugefügt, wenn ein Verlassen-Übergang ausgelöst wird, der nach einem Frame entfernt wird.

  • Die Klasse v-leave-active bezeichnet den aktiven Status für das Verlassen. Sie wird während der gesamten Austrittsphase angewendet. Dazu wird sie unmittelbar nach dem Auslösen eines Überblendungsübergangs hinzugefügt und nach Abschluss des Übergangs oder der Animation entfernt. Wie bei der Klasse v-enter-active kann man die Dauer, die Verzögerung und die Beschleunigungskurve für den Austrittsübergang definieren.

  • Die Klasse v-leave-to ist ab der Version 2.1.8 von Vue.js verfügbar und gibt einen Endzustand für das Verlassen an. Ein Frame wird hinzugefügt, nachdem ein Überblendungsübergang ausgelöst wurde und gleichzeitig wird die Klasse v-leave entfernt. Die Klasse wird nach Abschluss des Übergangs oder der Animation entfernt.

Wie Sie schon in dem Beispiel gesehen haben, wird jeder dieser Klassen der Name des Übergangs vorangestellt. Hier ist das v-Präfix der Standard, wenn Sie ein <transition>-Element ohne Namen verwenden. Wenn Sie beispielsweise <transition name = ”my-transition”> verwenden, würde die Klasse v-enter stattdessen my-transition-enter sein.

Tipp

Da die Übergangseffekte auf CSS basieren, kann man auch sämtliche Effekte hier spezifizieren, die modernes CSS bereitstellt. Die Klassen v-enter-active und v-leave-active geben Ihnen auch die Möglichkeit, verschiedene Beschleunigungskurven für Eingabe-/Verlassen-Übergänge festzulegen.

11.4 CSS-Animationen

CSS-Animationen werden bei Vue.js auf dieselbe Weise wie CSS-Übergänge angewendet. Der Unterschied besteht eigentlich darin, dass v-enter nicht unmittelbar nach dem Einfügen des Elements entfernt wird, sondern bei einem animationend-Ereignis. Dazu kommt die Eigenschaft animation zum Einsatz.

Für das Beispiel, in dem eine übliche CSS-Keyframe-Animation verwendet wird, gibt es in den Dateien trans2.html und trans2.js keine relevanten Änderungen. Nur in der CSS-Datei trans2.css wird es interessant:

… .bounce-enter-active {   animation: bounce-in 2.5s; } .bounce-leave-active {   animation: bounce-in 2.5s reverse; } @keyframes bounce-in {   0% {     transform: scale(0);   }   50% {     transform: scale(1.5);   }   100% {     transform: scale(1);   } }

Tipp

Sie können auch angepasste Übergangsklassen erstellen. Dazu überschreiben Sie einfach die Standardübergangsklassen von Vue.js. Dies ist etwa nützlich, wenn Sie das Übergangssystem von Vue.js mit einer anderen CSS-Animationsbibliothek wie Animate.css kombinieren möchten.

11.5 Spezielle Situationen

Vue.js zaubert in der Regel im Hintergrund und die meisten Animationen oder Übergänge laufen somit mehr oder weniger ohne Zutun des Programmierers ab. Aber es gibt ein paar Situationen, die besonderer Aufmerksamkeit bedürfen:

11.5.1 Übergänge und Animationen zusammen verwenden

Vue.js muss Ereignis-Listener hinzufügen, um zu wissen, wann ein Übergang beendet ist. Abhängig von der Art der angewendeten CSS-Regeln kann es dann entweder ein Übergangs- oder Animationsende sein. Wenn Sie exklusiv nur den einen oder anderen Typ verwenden, kann das Framework den korrekten Typ automatisch und zuverlässig erkennen. Nur wenn Sie beide Typen für dasselbe Element verwenden wollen, müssen Sie den Typ, den Vue.js in einem Typattribut berücksichtigen soll, explizit mit einem Wert für Animation oder Übergang angeben.

11.5.2 Explizite Übergangszeiten – die duration-Angabe

Neu seit der Version 2.2.0 können Sie die Dauer (Duration) von Animationen und Übergängen beeinflussen. In den meisten Fällen kann Vue.js automatisch feststellen, wann der Übergang abgeschlossen ist. Standardmäßig wartet dabei das Framework auf das erste Übergangs- oder Animationsende-Ereignis des Stammübergangselements. Dies ist jedoch nicht immer erwünscht – etwa wenn man bei verschachtelten inneren Elementen einen verzögerten Übergang oder eine längere Übergangszeit als das Wurzelübergangselement haben will.

In solchen Fällen können Sie eine explizite Übergangsdauer (in Millisekunden) angeben, indem Sie die duration-Eigenschaft der Komponente <transition> verwenden:

Das geht schematisch so:

<transition: duration = "1000"> … </ transition>

Sie können auch getrennte Werte für die Eingangs- und Ausgangsdauer angeben:

<transition :duration="{ enter: 500, leave: 1800 }">…</transition>

11.5.3 JavaScript-Hooks

Sie können auch JavaScript-Hooks in Attributen definieren. Etwa so:

<transition v-on:before-enter="beforeEnter" v-on:enter="enter"   v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled"   v-on:before-leave="beforeLeave" v-on:leave="leave"   v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled">   … </transition>  … methods: { …     beforeEnter: function (el) {      …   },   enter: function (el, done) {      …     done()   },   afterEnter: function (el) { …   },   enterCancelled: function (el) {      …   },   beforeLeave: function (el) {      …   },   leave: function (el, done) {     …     done()   },   afterLeave: function (el) {     …   },   leaveCancelled: function (el) {     …   } }

Beachten Sie, dass diese Hooks nicht in allen Situationen alle verfügbar sind. Diese Hooks können auch in Kombination mit CSS-Übergängen oder -Animationen oder auch einzeln verwendet werden.

Wenn Sie nur JavaScript-Übergänge verwenden, sind die durchgeführten Callbacks für die Enter- und Leave-Hooks erforderlich. Andernfalls werden die Hooks synchron aufgerufen und der Übergang wird sofort beendet.

Tipp

Wenn Sie ausschließlich JavaScript-Übergänge verwenden wollen, ist es sinnvoll, dass Sie die Direktive v-bind verwenden und dort den Wert css = ”false” setzen. Das erkennt Vue.js und kann die CSS-Erkennung überspringen. Dies verhindert auch, dass CSS-Regeln versehentlich den Übergang beeinträchtigen.

11.5.4 Animation von Daten

Vue,js bietet auch eine ganze Reihe an Möglichkeiten zur Animation von Daten selbst. Zum Beispiel:

  • Zahlen und Berechnungen

  • Farbanzeigen

  • Positionen von SVG-Knoten

  • Größen und andere Eigenschaften von Elementen

Alle diese Daten werden entweder bereits als Rohzahlen gespeichert oder können in Zahlen umgewandelt werden. Wenn wir das getan haben, können Sie diese mithilfe von Bibliotheken von Drittanbietern in Kombination mit den Reaktivitäts- und Komponentensystemen von Vue.js animieren. Einen Einstieg finden Sie dazu unter https://vuejs.org/v2/guide/transitioning-state.html.

Zusammenfassung

Übergänge und Animationen mit Vue.js sind auf dem Stand der Zeit, aber Kritiker könnten bemerken, dass sie sicher ganz nett sind, aber nicht wirklich aufregend und einzigartig. Aber von „kaltem Kaffee“ zu sprechen, würde den Features Unrecht tun. Dennoch – alleine durch die mögliche Integration von Fremdbibliotheken und Fremdframeworks für diese Effekte sowie der sehr engen Verzahnung mit den Standardeffekten von CSS und DHTML wird deutlich, dass hier nicht die Highlights von Vue.js zu finden sind, sondern es eher Features sind, die Vue.js der „Vollständigkeit halber“ auch bereitstellen muss. Oder vielleicht besser ausgedrückt – Vue.js hat auf dem Gebiet weder ein Alleinstellungsmerkmal noch vermutlich die Kernkompetenz, weswegen man sich für dieses Framework entscheidet.