Integration von Drittanbieter-Animationsbibliotheken in ein Projekt

Das Erstellen von CSS-basierten Animationen und Übergängen kann eine Herausforderung sein. Sie können komplex und zeitaufwendig sein. Sie müssen mit einem Projekt vorankommen, bei dem wenig Zeit bleibt, um den perfekten Übergang zu optimieren? Erwägen Sie eine Drittanbieter-CSS-Animationsbibliothek mit gebrauchsfertigen Animationen, die nur darauf warten, verwendet zu werden. Doch Sie fragen sich vielleicht: Was sind das? Was bieten sie? Wie verwende ich sie?

Nun, finden wir es heraus.

Eine (sozusagen) kurze Geschichte von :hover

Es gab einmal eine Zeit, in der das Konzept eines Hover-Zustands ein triviales Beispiel für das war, was heute angeboten wird. Tatsächlich war die Idee, eine Reaktion auf das Überfahren eines Elements mit dem Cursor zu haben, mehr oder weniger nicht existent. Verschiedene Wege, diese Funktion bereitzustellen, wurden vorgeschlagen und implementiert. Diese kleine Funktion öffnete auf ihre Weise die Tür für die Idee, dass CSS in der Lage ist, Elemente auf der Seite zu animieren. Im Laufe der Zeit haben die zunehmende Komplexität, die mit diesen Funktionen möglich ist, zu CSS-Animationsbibliotheken geführt.

Macromedia’s Dreamweaver wurde im Dezember 1997 eingeführt und bot eine einfache Funktion, einen Bildwechsel beim Hover. Diese Funktion wurde mit einer JavaScript-Funktion implementiert, die vom Editor in HTML eingebettet wurde. Diese Funktion hieß MM_swapImage() und ist zu einer Art Webdesign-Folklore geworden. Es war ein einfach zu verwendendes Skript, sogar außerhalb von Dreamweaver, und seine Popularität hat dazu geführt, dass es auch heute noch verwendet wird. In meiner anfänglichen Recherche für diesen Artikel habe ich 2018 eine Frage zu dieser Funktion im Hilfe-Forum von Adobe Dreamweaver (Adobe hat Macromedia 2005 übernommen) gefunden.

Die JavaScript-Funktion tauschte ein Bild mit einem anderen aus, indem sie das src-Attribut basierend auf mouseover und mouseout Ereignissen änderte. Wenn sie implementiert wurde, sah sie ungefähr so aus

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ImageName','','newImage.jpg',1)">
  <img src="originalImage.jpg" name="ImageName" width="100" height="100" border="0">
</a>

Nach heutigen Maßstäben wäre dies mit JavaScript relativ einfach zu bewerkstelligen, und viele von uns könnten das praktisch im Schlaf tun. Aber bedenken Sie, dass JavaScript zu dieser Zeit (entstanden 1995) noch eine neue Skriptsprache war und manchmal von Browser zu Browser anders aussah und sich anders verhielt. JavaScript, das browserübergreifend funktionierte, war nicht immer einfach zu erstellen, und nicht jeder, der Webseiten erstellte, schrieb JavaScript. (Obwohl sich das sicherlich geändert hat.) Dreamweaver bot diese Funktionalität über ein Menü im Editor an, und der Webdesigner musste das JavaScript nicht einmal schreiben. Es basierte auf einer Reihe von "Verhaltensweisen", die aus einer Liste verschiedener Optionen ausgewählt werden konnten. Diese Optionen konnten nach einer Reihe von Zielbrowsern gefiltert werden: 3.0-Browser, 4.0-Browser, IE 3.0, IE 4.0, Netscape 3.0, Netscape 4.0. Ach, die guten alten Zeiten.

Etwa ein Jahr nach der ersten Veröffentlichung von Dreamweaver erwähnte die CSS2-Spezifikation von W3C :hover in einem Arbeitsentwurf vom Januar 1998. Sie wurde speziell im Hinblick auf Ankerlinks erwähnt, aber die Formulierung legt nahe, dass sie möglicherweise auch auf andere Elemente angewendet werden konnte. Für die meisten Zwecke scheint dieser Pseudo-Selektor der Beginn einer einfachen Alternative zu MM_swapImage() zu sein, da background-image im selben Entwurf enthalten war. Obwohl die Browserunterstützung ein Problem darstellte, da es Jahre dauerte, bis genügend Browser CSS2 richtig unterstützten, um es für viele Webdesigner zu einer praktikablen Option zu machen. Schließlich gab es eine W3C-Empfehlung für CSS2.1, die als Grundlage für das "moderne" CSS, wie wir es kennen, angesehen werden kann und im Juni 2011 veröffentlicht wurde.

Inmitten all dessen kam jQuery im Jahr 2006 auf. Glücklicherweise trug jQuery wesentlich zur Vereinfachung von JavaScript zwischen den verschiedenen Browsern bei. Eine interessante Sache für unsere Geschichte: Die erste Version von jQuery bot die animate()-Methode an. Mit dieser Methode konnten Sie CSS-Eigenschaften für jedes Element jederzeit animieren; nicht nur beim Hover. Allein durch ihre enorme Popularität deckte diese Methode den Bedarf an einer robusteren CSS-Lösung, die im Browser integriert ist – einer Lösung, die keine JavaScript-Bibliothek benötigt, die aufgrund von Browserbeschränkungen nicht immer sehr performant war.

Die :hover-Pseudo-Klasse bot nur einen harten Wechsel von einem Zustand zu einem anderen, ohne Unterstützung für einen sanften Übergang. Sie konnte auch keine Änderungen an Elementen animieren, die über etwas so Grundlegendes wie das Überfahren eines Elements hinausgingen. JQuerys animate()-Methode bot diese Funktionen. Sie ebnete den Weg, und es gab kein Zurück mehr. Wie es in der dynamischen Welt der Webentwicklung üblich ist, war ein Arbeitsentwurf zur Lösung dieses Problems bereits in Arbeit, bevor die Empfehlung von CSS2.1 veröffentlicht wurde. Der erste Arbeitsentwurf für das CSS Transitions Module Level 3 wurde erstmals im März 2009 vom W3C veröffentlicht. Der erste Arbeitsentwurf für das CSS Animations Module Level 3 wurde ungefähr zur gleichen Zeit veröffentlicht. Beide CSS-Module befinden sich zum Zeitpunkt des Schreibens (Oktober 2018) immer noch im Status eines Arbeitsentwurfs, aber natürlich nutzen wir sie bereits intensiv.

Was also als eine JavaScript-Funktion eines Drittanbieters für einen einfachen Hover-Zustand begann, hat zu Übergängen und Animationen in CSS geführt, die aufwendige und komplexe Animationen ermöglichen – eine Komplexität, die viele Entwickler nicht unbedingt in Betracht ziehen möchten, da sie bei neuen Projekten schnell vorankommen müssen. Wir haben den Kreis geschlossen; heute wurden viele Drittanbieter-CSS-Animationsbibliotheken entwickelt, um diese Komplexität auszugleichen.

Drei verschiedene Arten von Drittanbieter-Animationsbibliotheken

Wir befinden uns in dieser neuen Welt, die leistungsfähige, aufregende und komplexe Animationen in unseren Webseiten und Apps ermöglicht. Mehrere verschiedene Ideen sind in den Vordergrund getreten, wie diese neuen Aufgaben angegangen werden können. Es ist nicht so, dass ein Ansatz besser ist als ein anderer; tatsächlich gibt es in jedem eine gute Menge an Überschneidungen. Der Unterschied liegt eher darin, wie wir sie implementieren und den Code dafür schreiben. Einige sind reine JavaScript-Bibliotheken, während andere reine CSS-Sammlungen sind.

JavaScript-Bibliotheken

Bibliotheken, die ausschließlich über JavaScript funktionieren, bieten oft Fähigkeiten, die über die gängigen CSS-Animationen hinausgehen. Normalerweise gibt es Überschneidungen, da die Bibliotheken möglicherweise tatsächlich CSS-Funktionen als Teil ihrer Engine nutzen, dies aber zugunsten der API abstrahiert wäre. Beispiele für solche Bibliotheken sind Greensock und Anime.js. Sie können das Ausmaß dessen, was sie bieten, anhand der von ihnen bereitgestellten Demos erkennen (Greensock hat eine schöne Sammlung auf CodePen). Sie sind meist für sehr komplexe Animationen gedacht, können aber auch für einfachere Animationen nützlich sein.

JavaScript- und CSS-Bibliotheken

Es gibt Drittanbieter-Bibliotheken, die hauptsächlich CSS-Klassen enthalten, aber etwas JavaScript für die einfache Verwendung der Klassen in Ihren Projekten bereitstellen. Eine Bibliothek, Micron.js, bietet sowohl eine JavaScript-API als auch Datenattribute, die auf Elementen verwendet werden können. Diese Art von Bibliothek ermöglicht die einfache Verwendung von vorgefertigten Animationen, die Sie einfach auswählen können. Eine weitere Bibliothek, Motion UI, ist für die Verwendung mit einem JavaScript-Framework konzipiert. Sie funktioniert jedoch auch nach einem ähnlichen Prinzip der Mischung aus einer JavaScript-API, vorgefertigten Klassen und Datenattributen. Diese Art von Bibliotheken bietet vorgefertigte Animationen und eine einfache Möglichkeit, diese zu verknüpfen.

CSS-Bibliotheken

Die dritte Art von Bibliothek ist reine CSS. Typischerweise handelt es sich hierbei nur um eine CSS-Datei, die Sie über ein Link-Tag in Ihrem HTML laden. Sie wenden dann spezifische CSS-Klassen an und entfernen sie, um die bereitgestellten Animationen zu nutzen. Zwei Beispiele für diese Art von Bibliothek sind Animate.css und Animista. Das heißt, es gibt sogar große Unterschiede zwischen diesen beiden spezifischen Bibliotheken. Animate.css ist ein komplettes CSS-Paket, während Animista eine schicke Benutzeroberfläche bietet, um die gewünschten Animationen mit dem bereitgestellten Code auszuwählen. Diese Bibliotheken sind oft einfach zu implementieren, aber Sie müssen Code schreiben, um sie zu nutzen. Dies sind die Arten von Bibliotheken, auf die sich dieser Artikel konzentrieren wird.

Drei verschiedene Arten von CSS-Animationen

Ja, es gibt ein Muster; die Dreierregel ist schließlich überall.

In den meisten Fällen gibt es drei Arten von Animationen zu berücksichtigen, wenn Drittanbieter-Bibliotheken genutzt werden. Jeder Typ eignet sich für einen anderen Zweck und hat unterschiedliche Anwendungsmöglichkeiten.

Hover-Animationen

Diese Animationen sind dazu gedacht, in einer Art Hover-Zustand beteiligt zu sein. Sie werden oft mit Buttons verwendet, aber eine weitere Möglichkeit ist, sie zur Hervorhebung von Bereichen zu verwenden, über die der Cursor gerade fährt. Sie können auch für Fokus-Zustände verwendet werden.

Aufmerksamkeits-Animationen

Diese Animationen sind dafür gedacht, auf Elementen verwendet zu werden, die sich normalerweise außerhalb des visuellen Zentrums der Person befinden, die die Seite betrachtet. Eine Animation wird auf einen Bereich des Displays angewendet, der Aufmerksamkeit erfordert. Solche Animationen können subtiler Natur sein für Dinge, die letztendlich Aufmerksamkeit erfordern, aber nicht dringend sind. Sie können auch sehr ablenkend sein, wenn sofortige Aufmerksamkeit erforderlich ist.

Übergangs-Animationen

Diese Animationen sind oft dazu gedacht, ein Element durch ein anderes im Bild zu ersetzen, können aber auch für ein einzelnes Element verwendet werden. Diese beinhalten normalerweise eine Animation zum "Verlassen" des Bildes und eine spiegelbildliche Animation zum "Eintreten" ins Bild. Denken Sie an das Aus- und Einblenden. Dies ist häufig in Single-Page-Anwendungen erforderlich, wenn ein Datensatz durch einen anderen Datensatz ersetzt wird, zum Beispiel.

Lassen Sie uns also Beispiele für jeden dieser Animationstypen durchgehen und wie man sie verwenden könnte.

Lassen Sie uns es hochhalten!

Einige Bibliotheken sind möglicherweise bereits für Hover-Effekte eingerichtet, während einige Hover-Zustände als Hauptzweck haben. Eine solche Bibliothek ist Hover.css, eine Drop-in-Lösung, die eine schöne Bandbreite an Hover-Effekten über Klassennamen bietet. Manchmal möchten wir jedoch eine Animation in einer Bibliothek verwenden, die die :hover-Pseudo-Klasse nicht direkt unterstützt, da dies mit globalen Stilen kollidieren könnte.

Für dieses Beispiel werde ich die tada-Animation verwenden, die Animate.css bereitstellt. Sie ist eher als Aufmerksamkeitserreger gedacht, aber für dieses Beispiel wird sie gut ausreichen. Wenn Sie die CSS der Bibliothek durchsehen würden, würden Sie feststellen, dass keine :hover-Pseudo-Klasse zu finden ist. Also müssen wir sie auf unsere eigene Weise zum Laufen bringen.

Die Klasse tada allein ist einfach das hier

.tada {
  animation-name: tada;
}

Ein einfacher Ansatz, um diese auf einen Hover-Zustand reagieren zu lassen, besteht darin, eine eigene lokale Kopie der Klasse zu erstellen, sie aber leicht zu erweitern. Normalerweise ist Animate.css eine Drop-in-Lösung, sodass wir nicht unbedingt die Möglichkeit haben, die ursprüngliche CSS-Datei zu bearbeiten; obwohl Sie, wenn Sie möchten, eine eigene lokale Kopie der Datei haben könnten. Daher erstellen wir nur den Code, der sich von ihm unterscheiden soll, und überlassen der Bibliothek den Rest.

.tada-hover:hover {
  animation-name: tada;
}

Wir sollten wahrscheinlich den ursprünglichen Klassennamen nicht überschreiben, falls wir ihn tatsächlich woanders verwenden möchten. Stattdessen erstellen wir eine Variante, auf die wir die :hover-Pseudo-Klasse auf den Selektor setzen können. Jetzt verwenden wir einfach die erforderliche animated-Klasse der Bibliothek zusammen mit unserer benutzerdefinierten tada-hover-Klasse für ein Element, und es wird diese Animation beim Hover abspielen.

Wenn Sie diese Art von benutzerdefinierter Klasse nicht erstellen möchten, sondern stattdessen eine JavaScript-Lösung bevorzugen, gibt es einen relativ einfachen Weg, dies zu handhaben. Seltsamerweise ist es eine ähnliche Methode wie die MM_imageSwap()-Methode aus Dreamweaver, die wir bereits besprochen haben.

// Let's select elements with ID #js_example
var js_example = document.querySelector('#js_example');

// When elements with ID #js_example are hovered...
js_example.addEventListener('mouseover', function () {
  // ...let's add two classes to the element: animated and tada...
  this.classList.add('animated', 'tada');
});
// ...then remove those classes when the mouse is not on the element.
js_example.addEventListener('mouseout', function () {
  this.classList.remove('animated', 'tada');
});

Es gibt tatsächlich mehrere Möglichkeiten, dies zu handhaben, je nach Kontext. Hier erstellen wir einige Event-Listener, die auf die Maus-Über- und Maus-Ab-Ereignisse warten. Diese Listener wenden dann die animated- und tada-Klassen der Bibliothek nach Bedarf an und entfernen sie. Wie Sie sehen können, kann die Erweiterung einer Drittanbieter-Bibliothek, um sie an unsere Bedürfnisse anzupassen, auf relativ einfache Weise erfolgen.

Kann ich bitte Ihre Aufmerksamkeit bekommen?

Eine weitere Art von Animation, bei der Drittanbieter-Bibliotheken helfen können, sind Aufmerksamkeitserreger. Diese Animationen sind nützlich, wenn Sie die Aufmerksamkeit auf ein Element oder einen Abschnitt der Seite lenken möchten. Beispiele hierfür könnten Benachrichtigungen oder nicht ausgefüllte erforderliche Formularfelder sein. Diese Animationen können subtil oder direkt sein. Subtil, wenn etwas letztendlich Aufmerksamkeit erfordert, aber nicht sofort behoben werden muss. Direkt, wenn etwas sofort behoben werden muss.

Einige Bibliotheken haben solche Animationen als Teil des Gesamtpakets, während andere speziell für diesen Zweck entwickelt wurden. Sowohl Animate.css als auch Animista bieten aufmerksamkeitserregende Animationen, aber das ist nicht der Hauptzweck dieser Bibliotheken. Ein Beispiel für eine Bibliothek, die für diesen Zweck entwickelt wurde, ist CSShake. Welche Bibliothek Sie verwenden, hängt von den Bedürfnissen des Projekts und dem Zeitaufwand ab, den Sie in die Implementierung investieren möchten. CSShake ist beispielsweise mit geringem Aufwand einsatzbereit – Sie wenden einfach die benötigten Klassen an. Wenn Sie jedoch bereits eine Bibliothek wie Animate.css verwendet haben, möchten Sie wahrscheinlich keine zweite Bibliothek einführen (aus Gründen der Leistung, Abhängigkeit und so weiter).

Daher kann eine Bibliothek wie Animate.css verwendet werden, erfordert aber etwas mehr Einrichtung. Die GitHub-Seite der Bibliothek hat Beispiele, wie man dabei vorgeht. Abhängig von den Bedürfnissen eines Projekts ist die Implementierung dieser Animationen als Aufmerksamkeitserreger ziemlich unkompliziert.

Für eine subtile Art von Animation könnten wir eine haben, die einfach eine bestimmte Anzahl von Malen wiederholt und dann stoppt. Dies beinhaltet normalerweise das Hinzufügen der Klassen der Bibliothek, das Anwenden einer CSS-Eigenschaft für die Animationsiteration und das Warten auf das Ereignis "animationend", um die Klassen der Bibliothek zu löschen.

Hier ist ein einfaches Beispiel, das dem gleichen Muster folgt, das wir bereits für Hover-Zustände betrachtet haben

var pulse = document.querySelector('#pulse');

function playPulse () {
  pulse.classList.add('animated', 'pulse');
}

pulse.addEventListener('animationend', function () {
  pulse.classList.remove('animated', 'pulse');
});

playPulse();

Die Klassen der Bibliothek werden angewendet, wenn die Funktion playPulse aufgerufen wird. Es gibt einen Event-Listener für das animationend-Ereignis, der die Klassen der Bibliothek entfernt. Normalerweise würde dies nur einmal abgespielt werden, aber Sie möchten vielleicht mehrmals wiederholen, bevor es stoppt. Animate.css bietet keine Klasse dafür, aber es ist einfach genug, eine CSS-Eigenschaft für unser Element anzuwenden, um dies zu behandeln.

#pulse {
  animation-iteration-count: 3; /* Stop after three times */
}

Auf diese Weise wird die Animation dreimal abgespielt, bevor sie stoppt. Wenn wir die Animation früher stoppen müssten, können wir die Klassen der Bibliothek manuell außerhalb der animationend-Funktion entfernen. Die Dokumentation der Bibliothek enthält tatsächlich ein Beispiel für eine wiederverwendbare Funktion zum Anwenden der Klassen, die sie nach der Animation entfernt; sehr ähnlich dem obigen Code. Es wäre sogar relativ einfach, sie zu erweitern, um die Iterationsanzahl auf das Element anzuwenden.

Für einen direkteren Ansatz, nehmen wir an, eine unendliche Animation, die nicht stoppt, bis nach einer Art Benutzerinteraktion. Nehmen wir an, das Klicken auf das Element startet die Animation und ein erneutes Klicken stoppt sie. Beachten Sie, dass die Art und Weise, wie Sie die Animation starten und stoppen möchten, Ihnen überlassen bleibt.

var bounce = document.querySelector('#bounce');

bounce.addEventListener('click', function () {
  if (!bounce.classList.contains('animated')) {
    bounce.classList.add('animated', 'bounce', 'infinite');
  } else {
    bounce.classList.remove('animated', 'bounce', 'infinite');
  }
});

Ganz einfach. Das Klicken auf das Element prüft, ob die "animated"-Klasse der Bibliothek angewendet wurde. Wenn dies nicht der Fall ist, wenden wir die Klassen der Bibliothek an, damit die Animation startet. Wenn die Klassen vorhanden sind, entfernen wir sie, um die Animation zu stoppen. Beachten Sie die Klasse infinite am Ende von classList. Glücklicherweise bietet Animate.css dies out-of-the-box. Wenn Ihre gewählte Bibliothek eine solche Klasse nicht anbietet, dann ist das hier, was Sie in Ihrem CSS brauchen

#bounce {
  animation-iteration-count: infinite;
}

Hier ist eine Demo, die zeigt, wie sich dieser Code verhält

Siehe den Pen
3rd Party Animation Libraries: Attention Seekers von Travis Almand (@talmand)
auf CodePen.

Zeug aus dem Weg räumen

Bei der Recherche für diesen Artikel habe ich festgestellt, dass Übergänge (nicht zu verwechseln mit CSS-Übergängen) mit Abstand der häufigste Animationstyp in Drittanbieter-Bibliotheken sind. Dies sind einfache Animationen, die dazu dienen, ein Element auf der Seite ein- oder ausblenden zu lassen. Ein sehr häufiges Muster in modernen Single-Page-Anwendungen ist es, ein Element die Seite verlassen zu lassen, während ein anderes es ersetzt, indem es die Seite betritt. Denken Sie an das Ausblenden des ersten Elements und das Einblenden des zweiten. Dies könnte bedeuten, alte Daten durch neue zu ersetzen, zum nächsten Panel in einer Sequenz zu wechseln oder mit einem Router von einer Seite zur anderen zu wechseln. Sowohl Sarah Drasner als auch Georgy Marchuk haben ausgezeichnete Beispiele für diese Arten von Übergängen.

Größtenteils stellen Animationsbibliotheken nicht die Mittel zur Verfügung, um Elemente während der Übergangsanimationen zu entfernen und hinzuzufügen. Bibliotheken, die zusätzliches JavaScript bereitstellen, haben diese Funktionalität möglicherweise tatsächlich, aber da die meisten dies nicht tun, werden wir besprechen, wie diese Funktionalität jetzt gehandhabt wird.

Einfügen eines einzelnen Elements

Für dieses Beispiel verwenden wir erneut Animate.css als unsere Bibliothek. In diesem Fall verwende ich die fadeInDown-Animation.

Bitte beachten Sie, dass es viele Möglichkeiten gibt, ein Element in den DOM einzufügen, und ich möchte sie hier nicht behandeln. Ich zeige nur, wie man eine Animation nutzt, um das Einfügen schöner und natürlicher zu gestalten, als wenn das Element einfach ins Bild poppt. Für Animate.css (und wahrscheinlich viele andere Bibliotheken) ist das Einfügen eines Elements mit der Animation recht einfach.

let insertElement = document.createElement('div');
insertElement.innerText = 'this div is inserted';
insertElement.classList.add('animated', 'fadeInDown');

insertElement.addEventListener('animationend', function () {
  this.classList.remove('animated', 'fadeInDown');
});

document.body.append(insertElement);

Wie Sie das Element erstellen, spielt keine große Rolle; Sie müssen nur sicherstellen, dass die benötigten Klassen bereits vor dem Einfügen des Elements angewendet werden. Dann wird es schön in seine Position animiert. Ich habe auch einen Event-Listener für das animationend-Ereignis hinzugefügt, der die Klassen entfernt. Wie üblich gibt es mehrere Möglichkeiten, dies zu tun, und dies ist wahrscheinlich der direkteste Weg. Der Grund für das Entfernen der Klassen ist, den Prozess einfacher umzukehren, wenn wir das wünschen. Wir möchten nicht, dass die eintretende Animation mit einer austretenden Animation kollidiert.

Entfernen eines einzelnen Elements

Das Entfernen eines einzelnen Elements ist ähnlich wie das Einfügen eines Elements. Das Element existiert bereits, also wenden wir einfach die gewünschten Animationsklassen an. Dann entfernen wir das Element am Ende der Animation aus dem DOM beim animationend-Ereignis. In diesem Beispiel verwenden wir die fadeOutDown-Animation von Animate.css, da sie gut mit der fadeInDown-Animation zusammenarbeitet.

let removeElement = document.querySelector('#removeElement');

removeElement.addEventListener('animationend', function () {
  this.remove();
});

removeElement.classList.add('animated', 'fadeOutDown');

Wie Sie sehen können, zielen wir auf das Element ab, fügen die Klassen hinzu und entfernen das Element am Ende der Animation.

Ein Problem bei all dem ist, dass das Einfügen und Entfernen von Elementen auf diese Weise dazu führt, dass sich die anderen Elemente auf der Seite verschieben, um sich anzupassen. Sie müssen dies irgendwie berücksichtigen, höchstwahrscheinlich mit CSS und dem Layout der Seite, um einen konstanten Platz für die Elemente zu erhalten.

Geh mir aus dem Weg, ich komme durch!

Nun werden wir zwei Elemente austauschen, eines verlässt die Bühne, während ein anderes eintritt. Es gibt verschiedene Möglichkeiten, dies zu handhaben, aber ich werde ein Beispiel geben, das im Wesentlichen die beiden vorherigen Beispiele kombiniert.

Siehe den Pen
3rd Party Animation Libraries: Transitioning Two Elements von Travis Almand (@talmand)
auf CodePen.

Ich werde das JavaScript in Teilen durchgehen, um zu erklären, wie es funktioniert. Zuerst speichern wir eine Referenz auf einen Button und den Container für die beiden Elemente. Dann erstellen wir zwei Boxen, die im Container ausgetauscht werden.

let button = document.querySelector('button');
let container = document.querySelector('.container');
let box1 = document.createElement('div');
let box2 = document.createElement('div');

Ich habe eine generische Funktion zum Entfernen der Animationsklassen für jedes animationEnd-Ereignis.

let removeClasses = function () {
  box1.classList.remove('animated', 'fadeOutRight', 'fadeInLeft');
  box2.classList.remove('animated', 'fadeOutRight', 'fadeInLeft');
}

Die nächste Funktion ist der Großteil der Austauschfunktionalität. Zuerst ermitteln wir die aktuell angezeigte Box. Basierend darauf können wir die austretenden und eintretenden Elemente ableiten. Das austretende Element erhält den Event-Listener, der die Funktion switchElements aufgerufen hat, zuerst entfernt, damit wir uns nicht in einer Animationsschleife wiederfinden. Dann entfernen wir das austretende Element aus dem Container, da seine Animation abgeschlossen ist. Als Nächstes fügen wir dem eintretenden Element die Animationsklassen hinzu und hängen es an den Container an, damit es sich an seine Position animiert.

let switchElements = function () {
  let currentElement = document.querySelector('.container .box');
  let leaveElement = currentElement.classList.contains('box1') ? box1 : box2;
  let enterElement = leaveElement === box1 ? box2 : box1;
  
  leaveElement.removeEventListener('animationend', switchElements);
  leaveElement.remove();
  enterElement.classList.add('animated', 'fadeInLeft');
  container.append(enterElement);
}

Wir müssen einige allgemeine Einstellungen für die beiden Boxen vornehmen. Außerdem hängen wir die erste Box an den Container an.

box1.classList.add('box', 'box1');
box1.addEventListener('animationend', removeClasses);
box2.classList.add('box', 'box2');
box2.addEventListener('animationend', removeClasses);

container.appendChild(box1);

Schließlich haben wir einen Klick-Event-Listener für unsere Schaltfläche, der das Umschalten durchführt. Wie diese Ereignissequenzen ausgelöst werden, bleibt technisch Ihnen überlassen. Für dieses Beispiel habe ich mich für einen einfachen Schaltflächenklick entschieden. Ich ermittle, welche Box gerade angezeigt wird und welche ausgeblendet wird, um die entsprechenden Klassen anzuwenden, die sie animiert ausblenden lassen. Dann wende ich einen Event-Listener für das animationEnd-Ereignis an, der die oben gezeigte Funktion switchElements aufruft, welche den eigentlichen Tausch behandelt.

button.addEventListener('click', function () {
  let currentElement = document.querySelector('.container .box');
  
  if (currentElement.classList.contains('box1')) {
    box1.classList.add('animated', 'fadeOutRight');
    box1.addEventListener('animationend', switchElements);
  } else {
    box2.classList.add('animated', 'fadeOutRight');
    box2.addEventListener('animationend', switchElements);
  }
}

Ein offensichtliches Problem mit diesem Beispiel ist, dass es extrem hartcodiert für diese eine Situation ist. Es kann jedoch leicht für verschiedene Situationen erweitert und angepasst werden. Das Beispiel ist also nützlich, um eine Möglichkeit zu verstehen, eine solche Aufgabe zu bewältigen. Glücklicherweise bieten einige Animationsbibliotheken wie MotionUI JavaScript, um bei Elementübergängen zu helfen. Eine weitere Überlegung ist, dass einige JavaScript-Frameworks wie VueJS Funktionalität bieten, um bei der Animation von Elementübergängen zu unterstützen.

Ich habe auch ein weiteres Beispiel erstellt, das ein flexibleres System bietet. Es besteht aus einem Container, der Referenzen auf Leave- und Enter-Animationen mit Datenattributen speichert. Der Container enthält zwei Elemente, die auf Befehl ihre Plätze tauschen. Die Art und Weise, wie dieses Beispiel aufgebaut ist, ist, dass die Animationen leicht über JavaScript in den Datenattributen geändert werden können. Ich habe auch zwei Container im Demo: einen, der Animate.css verwendet, und den anderen, der Animista für Animationen verwendet. Es ist ein großes Beispiel, daher werde ich den Code hier nicht untersuchen; aber er ist stark kommentiert, also schauen Sie ihn sich an, wenn er Sie interessiert.

Sehen Sie den Pen
3rd Party Animation Libraries: Custom Transition Example von Travis Almand (@talmand)
auf CodePen.

Nehmen Sie sich einen Moment Zeit, um nachzudenken...

Möchte wirklich jeder all diese Animationen sehen? Manche Leute könnten unsere Animationen als übertrieben und unnötig empfinden, aber für manche können sie tatsächlich Probleme verursachen. Vor einiger Zeit führte WebKit die Media Query prefers-reduced-motion ein, um bei möglichen Problemen mit dem Vestibular Spectrum Disorder zu helfen. Eric Bailey hat auch eine schöne Einführung in die Media Query gepostet, sowie einen Nachtrag mit Überlegungen zu Best Practices. Lesen Sie diese unbedingt.

Unterstützt Ihre Animationsbibliothek der Wahl also prefers-reduced-motion? Wenn die Dokumentation nichts dazu sagt, müssen Sie wahrscheinlich davon ausgehen, dass sie es nicht tut. Es ist jedoch ziemlich einfach, den Code der Bibliothek zu überprüfen, um zu sehen, ob etwas für die Media Query vorhanden ist. Animate.css hat es zum Beispiel in der _base.scss Teil.Datei.

@media (print), (prefers-reduced-motion) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }
}

Dieser Code-Schnipsel bietet auch ein hervorragendes Beispiel dafür, wie Sie dies selbst tun können, wenn die Bibliothek es nicht unterstützt. Wenn die Bibliothek eine gängige Klasse verwendet, wie Animate.css „animated“ verwendet, können Sie diese Klasse einfach anvisieren. Wenn sie eine solche Klasse nicht unterstützt, müssen Sie die tatsächliche Animationsklasse anvisieren oder eine eigene benutzerdefinierte Klasse zu diesem Zweck erstellen.

.scale-up-center {
  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up-center {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

@media (print), (prefers-reduced-motion) {
  .scale-up-center {
    animation: unset !important;
    transition: none !important;
  }
}

Wie Sie sehen, habe ich einfach das Beispiel von Animate.css verwendet und die Animationsklasse von Animista anvisiert. Beachten Sie, dass Sie dies für jede Animationsklasse wiederholen müssen, die Sie von der Bibliothek verwenden möchten. In Eric's Nachtragsartikel schlägt er jedoch vor, alle Animationen als progressive Verbesserung zu behandeln, und das könnte eine Möglichkeit sein, sowohl Code zu reduzieren als auch eine zugänglichere Benutzererfahrung zu schaffen.

Lassen Sie ein Framework die Schwerstarbeit für Sie erledigen

In vielerlei Hinsicht können die verschiedenen Frameworks wie React und Vue die Verwendung von Drittanbieter-CSS-Animationen einfacher machen als mit reinem JavaScript, hauptsächlich weil Sie die Klassenwechsel oder animationend-Ereignisse nicht manuell einrichten müssen. Sie können die Funktionalität nutzen, die die Frameworks bereits bieten. Das Schöne an der Verwendung von Frameworks ist, dass sie auch verschiedene Möglichkeiten zur Handhabung dieser Animationen bieten, je nach den Bedürfnissen des Projekts. Die folgenden Beispiele sind nur ein kleiner Ausschnitt von Optionen.

Hover-Effekte

Für Hover-Effekte empfehle ich, sie mit CSS einzurichten (wie oben vorgeschlagen), da dies der bessere Weg ist. Wenn Sie wirklich eine JavaScript-Lösung in einem Framework wie Vue benötigen, wäre es etwas wie das hier:

<button @mouseover="over($event, 'tada')" @mouseleave="leave($event, 'tada')">
  tada
</button>

methods: {
  over: function(e, type) {
    e.target.classList.add('animated', type);
  },
  leave: function (e, type) {
    e.target.classList.remove('animated', type);
  }
}

Nicht wirklich viel anders als die reine JavaScript-Lösung oben. Auch hier gibt es, wie zuvor, viele Möglichkeiten, dies zu handhaben.

Aufmerksamkeitserreger

Das Einrichten von Aufmerksamkeitserregern ist tatsächlich noch einfacher. In diesem Fall wenden wir einfach die erforderlichen Klassen an, wiederum am Beispiel von Vue:

<div :class="{animated: isPulse, pulse: isPulse}">pulse</div>

<div :class="[{animated: isBounce, bounce: isBounce}, 'infinite']">bounce</div>

Im Pulse-Beispiel werden, wann immer die boolesche Variable isPulse true ist, die beiden Klassen angewendet. Im Bounce-Beispiel werden, wann immer die boolesche Variable isBounce true ist, die Klassen animated und bounce angewendet. Die Klasse infinite wird unabhängig davon angewendet, damit wir unseren endlosen Bounce haben, bis die boolesche Variable isBounce wieder auf false gesetzt wird.

Übergänge

Glücklicherweise bietet die Transition-Komponente von Vue eine einfache Möglichkeit, Drittanbieter-Animationsklassen mit benutzerdefinierten Übergangsklassen zu verwenden. Andere Bibliotheken wie React können ähnliche Funktionen oder Add-ons bieten. Um die Animationsklassen in Vue zu nutzen, implementieren wir sie einfach in der Transition-Komponente.

<transition
  enter-active-class="animated fadeInDown"
  leave-active-class="animated fadeOutDown"
  mode="out-in"
>
  <div v-if="toggle" key="if">if example</div>
  <div v-else key="else">else example</div>
</transition>

Mit Animate.css wenden wir einfach die notwendigen Klassen an. Für enter-active wenden wir die erforderliche Klasse animated zusammen mit fadeInDown an. Für leave-active wenden wir die erforderliche Klasse animated zusammen mit fadeOutDown an. Während der Übergangssequenz werden diese Klassen zu den entsprechenden Zeiten eingefügt. Vue übernimmt das Einfügen und Entfernen der Klassen für uns.

Für ein komplexeres Beispiel zur Verwendung von Drittanbieter-Animationsbibliotheken in einem JavaScript-Framework erkunden Sie dieses Projekt.

Sehen Sie den Pen
KLKdJy von Travis Almand (@talmand)
auf CodePen.

Mach mit bei der Party!

Dies ist ein kleiner Vorgeschmack auf die Möglichkeiten, die Ihr Projekt erwarten, da es viele, viele Drittanbieter-CSS-Animationsbibliotheken zu erkunden gibt. Einige sind ausführlich, exzentrisch, spezifisch, aufdringlich oder einfach geradlinig. Es gibt Bibliotheken für komplexe JavaScript-Animationen wie Greensock oder Anime.js. Es gibt sogar Bibliotheken, die die Zeichen in einem Element anvisieren.

Hoffentlich inspiriert Sie all dies, mit diesen Bibliotheken zu spielen, während Sie Ihre eigenen CSS-Animationen erstellen.