Das Erstellen von CSS-basierten Animationen und überg?ngen kann eine Herausforderung sein. Sie k?nnen komplex und zeitaufw?ndig sein. Müssen Sie mit einem Projekt mit wenig Zeit voranschreiten, um den perfekten übergang zu optimieren? Betrachten Sie eine CSS-Animationsbibliothek von Drittanbietern mit bereitgestellten Animationen, die darauf warten, verwendet zu werden. Doch vielleicht denken Sie vielleicht: Was sind sie? Was bieten sie an? Wie benutze ich sie?

Nun, lass es uns herausfinden.

Eine (eine Art) kurze Geschichte von: schweben

Einmal gab es eine Zeit, in der das Konzept eines Schwebezustands ein triviales Beispiel dafür war, was heute angeboten wird. Tats?chlich war die Idee, eine Reaktion auf den Cursor zu reagieren, das auf einem Element weiterging, nicht oder weniger nicht vorhanden. Verschiedene M?glichkeiten, dieses Merkmal bereitzustellen, wurden vorgeschlagen und implementiert. In gewisser Weise ?ffnete dieses kleine Merkmal die Tür für die Idee, dass CSS Animationen für Elemente auf der Seite f?hig war. Im Laufe der Zeit hat die zunehmende Komplexit?t, die mit diesen Funktionen m?glich ist, zu CSS -Animationsbibliotheken geführt.

Der Dreamweaver von Macromedia wurde im Dezember 1997 vorgestellt und bot ein einfaches Feature, ein Bildtausch gegen HOVER. Diese Funktion wurde mit einer JavaScript -Funktion implementiert, die vom Editor in die HTML eingebettet werden würde. Diese Funktion wurde als MM_SWAPIMAGE () ausgezeichnet und ist ein bisschen Webdesign -Folklore geworden. Es war ein einfaches Drehbuch, selbst au?erhalb von Dreamweaver zu verwenden, und die Popularit?t hat dazu geführt, dass es noch heute noch verwendet wurde. In meiner ersten Forschung zu diesem Artikel fand ich eine Frage zu dieser Funktion aus dem Jahr 2018 zu Adobe's Dreamweaver (Adobe Accired Macromedia im Jahr 2005).

Die JavaScript -Funktion würde ein Bild mit einem anderen Bild tauschen, indem das SRC -Attribut basierend auf Mausover- und Mausout -Ereignissen ge?ndert wird. Bei der Implementierung sah es ungef?hr so ??aus:

 <a href="#" onmouseout="mm_swapimgrestore ()" onmouseover="mm_swapimage ('imageName', '', 'newimage.jpg', 1)">
  <img  src="originalImage.jpg" name="imagesName"    style="max-width:90%"  style="max-width:90%" border="0" alt="Animationsbibliotheken von Drittanbietern in ein Projekt integrieren" >
</a>

Nach heutigen Ma?st?ben w?re es ziemlich einfach, dies mit JavaScript zu erreichen, und viele von uns k?nnten dies praktisch in unserem Schlaf tun. Bedenken Sie jedoch, dass JavaScript zu dieser Zeit (erstellt 1995) immer noch diese neue Skriptsprache war und manchmal anders als Browser bis Browser aussah. Das Erstellen von Cross-Browser-JavaScript war nicht immer eine leichte Aufgabe, und nicht jeder, der Webseiten erstellte, schrieb sogar JavaScript. (Obwohl sich das sicherlich ge?ndert hat.) Dreamweaver bot diese Funktionalit?t über ein Menü im Editor und der Webdesigner musste nicht einmal das JavaScript schreiben. Es basierte auf einer Reihe von ?Verhaltensweisen“, die aus einer Liste verschiedener Optionen ausgew?hlt werden konnten. Diese Optionen k?nnten durch eine Reihe von gezielten Browsern gefiltert werden. 3.0 Browser, 4.0 Browser, dh 3.0, dh 4.0, netscape 3.0, netscape 4.0. Ah, die guten alten Zeiten.

Ungef?hr ein Jahr nachdem Dreamweaver zum ersten Mal ver?ffentlicht wurde, erw?hnte die CSS2 -Spezifikation von W3C: Schwebe in einem arbeitenden Entwurf vom Januar 1998. Sie wurde speziell in Bezug auf Ankerverbindungen erw?hnt, aber die Sprache legt nahe, dass sie m?glicherweise auf andere Elemente angewendet werden k?nnte. Für die meisten Zwecke scheint es, dass dieser Pseudo-Selektor der Beginn einer einfachen Alternative zu MM_SWAPIMAGE () sein würde, da das Hintergrundbild im selben Entwurf war. Obwohl die Browser -Unterstützung ein Problem war, dauerte es Jahre, bis der Browser CSS2 ordnungsgem?? unterstützte, um es für viele Webdesigner zu einer praktikablen Option zu machen. Es gab schlie?lich eine W3C -Empfehlung von CSS2.1, dies k?nnte als Grundlage für ?moderne“ CSS angesehen werden, wie wir es kennen, die im Juni 2011 ver?ffentlicht wurde.

Mitten in all dem kam JQuery im Jahr 2006. Zum Glück hat JQuery einen gro?en Beitrag zur Vereinfachung von JavaScript unter den verschiedenen Browsern geleistet. Eine Sache von Interesse für unsere Geschichte, die erste Version von JQuery bot die Animate () -Methode. Mit dieser Methode k?nnen Sie die CSS -Eigenschaften jederzeit in jedem Element animieren. Nicht nur auf Schwebe. Durch die pure Popularit?t stellte diese Methode die Notwendigkeit einer robusteren CSS -L?sung auf, die in den Browser eingebacken wurde - eine L?sung, für die keine JavaScript -Bibliothek erforderlich war, die aufgrund von Browser -Einschr?nkungen nicht immer sehr leistungsf?hig war.

Die: Hover Pseudo-Klasse bot nur einen harten Tausch von einem Zustand in einen anderen, ohne dass ein reibungsloser übergang unterstützt wurde. Es konnte auch nicht Ver?nderungen in Elementen au?erhalb von etwas, das so Grundlegend wie über ein Element schwebt, animieren. Die Animate () -Methode von JQuery bot diese Funktionen. Es ebnete den Weg und es gab kein Zurück. Als die Dinge in der dynamischen Welt der Webentwicklung lief, war ein Arbeitsentwurf zur L?sung dieser Voraussetzungen vor der Ver?ffentlichung von CSS2.1 gut im Gange. Der erste Arbeitsentwurf für CSS Transitions Modul Level 3 wurde erstmals im M?rz 2009 vom W3C ver?ffentlicht. Der erste Arbeitsentwurf für CSS -Animationen -Modul -Stufe 3 wurde ungef?hr zur gleichen Zeit ver?ffentlicht. Beide CSS -Module befinden sich ab Oktober 2018 noch in einem Arbeitsstatus, aber wir nutzen sie natürlich bereits stark von ihnen

Was als JavaScript-Funktion, die von einem Drittanbieter bereitgestellt wurde, nur für einen einfachen Schwebstatus begann, hat zu überg?ngen und Animationen in CSS geführt, die ausführliche und komplexe Animationen erm?glichen-Komplexit?t, die viele Entwickler nicht unbedingt berücksichtigen m?chten, wenn sie sich schnell zu neuen Projekten einsetzen müssen. Wir haben den Kreis geschlossen; Heute wurden viele CSS-Animationsbibliotheken von Drittanbietern erstellt, um diese Komplexit?t auszugleichen.

Drei verschiedene Arten von Animationsbibliotheken von Drittanbietern

Wir sind in dieser neuen Welt in der Lage, in unseren Webseiten und Apps leistungsstarke, aufregende und komplexe Animationen in der Lage zu sein. Es sind verschiedene Ideen in den Vordergrund gerückt, wie man sich diesen neuen Aufgaben n?hert. Es ist nicht so, dass ein Ansatz besser ist als jeder andere; In der Tat gibt es jeweils ein gutes Stück überlappung. Der Unterschied besteht mehr darin, wie wir Code für sie implementieren und schreiben. Einige sind nur Bibliotheken nur in JavaScript, w?hrend andere CSS-Sammlungen sind.

JavaScript -Bibliotheken

Bibliotheken, die ausschlie?lich über JavaScript agieren, bieten h?ufig Funktionen, die über die gemeinsamen CSS -Animationen hinausgehen. Normalerweise gibt es überlappungen, da die Bibliotheken m?glicherweise CSS -Funktionen als Teil ihres Motors verwenden, aber das würde zugunsten der API abstrahiert. Beispiele für solche Bibliotheken sind Greensock und Anime.js. Sie k?nnen das Ausma? dessen sehen, was sie anbieten, indem Sie sich die Demos ansehen, die sie bieten (Greensock hat eine sch?ne Sammlung auf CodePen). Sie sind haupts?chlich für hochkomplexe Animationen gedacht, k?nnen aber auch für grundlegende Animationen nützlich sein.

JavaScript- und CSS -Bibliotheken

Es gibt Bibliotheken von Drittanbietern, die in erster Linie CSS-Klassen enthalten, aber JavaScript für die einfache Verwendung der Klassen in Ihren Projekten bereitstellen. Eine Bibliothek, Micron.js, bietet sowohl eine JavaScript -API- als auch eine Datenattribute, die für Elemente verwendet werden k?nnen. Diese Art von Bibliothek erm?glicht eine einfache Verwendung vorgefertigter Animationen, aus denen Sie einfach ausw?hlen k?nnen. Eine andere Bibliothek, Motion UI, soll mit einem JavaScript -Framework verwendet werden. Obwohl es auch nach einem ?hnlichen Begriff einer Mischung aus einer JavaScript-API, vorgefertigten Klassen und Datenattributen funktioniert. Diese Arten von Bibliotheken bieten vorgefertigte Animationen und eine einfache M?glichkeit, sie zu verkabeln.

CSS -Bibliotheken

Die dritte Art von Bibliothek ist nur CSS. In der Regel handelt es sich nur um eine CSS -Datei, die Sie über ein Link -Tag in Ihrem HTML geladen haben. Anschlie?end verwenden und entfernen Sie bestimmte CSS -Klassen, um die bereitgestellten Animationen zu verwenden. Zwei Beispiele dieser Art von Bibliothek sind animate.css und Animista. Es gibt jedoch sogar gro?e Unterschiede zwischen diesen beiden bestimmten Bibliotheken. Animate.css ist ein Gesamt -CSS -Paket, w?hrend Animista eine glückliche Schnittstelle zur Auswahl der gewünschten Animationen mit dem bereitgestellten Code bietet. Diese Bibliotheken sind oft einfach zu implementieren, aber Sie müssen Code schreiben, um sie zu verwenden. Dies sind die Art von Bibliotheken, auf die sich dieser Artikel konzentriert.

Drei verschiedene Arten von CSS -Animationen

Ja, es gibt ein Muster; Die Dreierregel ist schlie?lich überall.

In den meisten F?llen sind drei Arten von Animationen zu berücksichtigen, die bei Verwendung von Bibliotheken von Drittanbietern berücksichtigt werden müssen. Jeder Typ passt zu einem anderen Zweck und verfügt über unterschiedliche M?glichkeiten, sie zu nutzen.

Schwebeanimationen

Diese Animationen sollen in einen Schwebezustand beteiligt sein. Sie werden oft mit Schaltfl?chen verwendet, aber eine andere M?glichkeit besteht darin, sie zu verwenden, um Abschnitte des Cursors hervorzuheben. Sie k?nnen auch für Fokuszust?nde verwendet werden.

Aufmerksamkeitsanimationen

Diese Animationen sollen für Elemente verwendet werden, die normalerweise au?erhalb des visuellen Zentrums der Person auf der Seite liegen. Eine Animation wird auf einen Abschnitt des Displays angewendet, der Aufmerksamkeit erfordert. Solche Animationen k?nnten in der Natur subtil sein für Dinge, die eine eventuelle Aufmerksamkeit ben?tigen, aber nicht schlimm in der Natur. Sie k?nnten auch sehr ablenken, wenn sofortige Aufmerksamkeit erforderlich ist.

übergangsanimationen

Diese Animationen sollen oft ein Element in der Ansicht ersetzen lassen, k?nnen aber auch für ein Element verwendet werden. Diese enthalten normalerweise eine Animation, um die Ansicht und Spiegelanimation für das ?Eingeben“ der Ansicht zu ?verlassen“. Denken Sie daran, dass Sie in einzelnen Seiten -Apps verblassen und verblassen, da ein Datenabschnitt beispielsweise zu einem anderen Datensatz übergeht.

Lassen Sie uns also Beispiele für jede dieser Art von Animationen und wie man sie verwenden.

Lassen Sie uns es schweben!

Einige Bibliotheken sind m?glicherweise bereits für Schwebebereicheffekte festgelegt, w?hrend einige Schwebezust?nde als Hauptzweck haben. Eine solche Bibliothek ist schwebend. Manchmal m?chten wir jedoch eine Animation in einer Bibliothek verwenden, die die: Hover-Pseudo-Klasse nicht direkt unterstützt, da dies m?glicherweise mit globalen Stilen in Konflikt steht.

In diesem Beispiel werde ich die TADA -Animation verwenden, die Animate.css bietet. Es ist eher als Aufmerksamkeitssuchender gedacht, aber für dieses Beispiel wird es gut ausreichen. Wenn Sie durch die CSS der Bibliothek schauen, werden Sie feststellen, dass es keine: Hover-Pseudo-Klasse gibt. Wir müssen es also alleine auf diese Weise funktionieren lassen.

Die Tada -Klasse von selbst ist einfach Folgendes:

 .tada {
  Animationsname: Tada;
}

Ein Ansatz mit geringem Liften, um dies auf einen Schwebstatus zu reagieren, besteht darin, unsere eigene lokale Kopie der Klasse zu erstellen, sie aber nur ein wenig 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 Ihre eigene lokale Kopie der Datei haben k?nnten, wenn Sie dies wünschen. Daher erstellen wir nur den Code, den wir anders sein müssen, und lassen die Bibliothek den Rest verarbeiten.

 .tada-hover: schwebe {
  Animationsname: Tada;
}

Wir sollten den ursprünglichen Klassennamen wahrscheinlich nicht au?er Kraft setzen, falls wir ihn tats?chlich an anderer Stelle verwenden m?chten. Stattdessen machen wir eine Variation, dass wir die: Hover-Pseudo-Klasse auf den Selektor platzieren k?nnen. Jetzt verwenden wir nur die erforderliche Animationsklasse der Bibliothek zusammen mit unserer benutzerdefinierten Tada-Hover-Klasse für ein Element, und es wird diese Animation auf Hover spielen.

Wenn Sie nicht auf diese Weise eine benutzerdefinierte Klasse erstellen m?chten, sondern stattdessen eine JavaScript -L?sung bevorzugen m?chten, gibt es eine relativ einfache M?glichkeit, dies zu bew?ltigen. Seltsamerweise ist es eine ?hnliche Methode wie die Methode mm_imageswap () von Dreamweaver, die wir zuvor besprochen haben.

 // W?hlen wir Elemente mit ID #js_example aus
var js_example = document.querySelector ('#js_example');

// Wenn Elemente mit ID #js_example schweben ...
js_example.adDeVentListener ('Mouseover', function () {
  // ... fügen wir dem Element zwei Klassen hinzu: animiert und tada ...
  this.classlist.add ('animiert', 'tada');
});
// ... Dann entfernen Sie diese Klassen, wenn sich die Maus nicht auf dem Element befindet.
js_example.addeventListener ('mausout', function () {
  this.classList.remove ('animiert', 'tada');
});

Abh?ngig vom Kontext gibt es tats?chlich mehrere M?glichkeiten, damit umzugehen. Hier erstellen wir einige Ereignish?rer, um auf die Events zur Maus-Over- und Maus-Out zu warten. Diese H?rer wenden und entfernen dann die animierten und TADA -Klassen der Bibliothek nach Bedarf. Wie Sie sehen k?nnen, kann die Erweiterung einer Bibliothek von Drittanbietern ein wenig nach unseren Anforderungen relativ einfach erfüllt werden.

Kann ich bitte Ihre Aufmerksamkeit haben?

Eine andere Art von Animation, mit denen Bibliotheken von Drittanbietern helfen k?nnen, sind Aufmerksamkeitssuchende. Diese Animationen sind nützlich, wenn Sie auf ein Element oder Abschnitt der Seite aufmerksam machen m?chten. Einige Beispiele hierfür k?nnten Benachrichtigungen oder nicht gefüllte erforderliche Formulareing?nge sein. Diese Animationen k?nnen subtil oder direkt sein. Subtil, wenn etwas eventuell Aufmerksamkeit braucht, aber nicht sofort gel?st werden muss. Direkte, wenn etwas jetzt eine L?sung ben?tigt.

Einige Bibliotheken haben solche Animationen als Teil des gesamten Pakets, w?hrend einige speziell für diesen Zweck erstellt werden. Sowohl Animate.css als auch Animista haben Aufmerksamkeitsanimationen, aber sie sind nicht der Hauptzweck für diese Bibliotheken. Ein Beispiel für eine Bibliothek, die zu diesem Zweck errichtet wurde, w?re CSshake. Welche Bibliothek zu verwenden ist, h?ngt von den Anforderungen des Projekts ab und davon, wie viel Zeit Sie in die Implementierung investieren m?chten. Zum Beispiel ist CSShake bereit, mit wenig Schwierigkeiten von Ihrer Seite zu gehen. Wenden Sie einfach nach Bedarf Klassen an. Wenn Sie bereits eine Bibliothek wie Animate.css verwendet haben, m?chten Sie wahrscheinlich keine zweite Bibliothek vorstellen (zur Leistung, der Abh?ngigkeit von Abh?ngigkeiten und dergleichen).

Eine Bibliothek wie Animate.css kann also verwendet werden, ben?tigt jedoch etwas mehr Setup. Die Github -Seite der Bibliothek enth?lt Beispiele dafür, wie man dies macht. Abh?ngig von den Bedürfnissen eines Projekts ist die Implementierung dieser Animationen als Aufmerksamkeitssuchende ziemlich einfach.

Für eine subtile Art von Animation k?nnten wir eine haben, die nur eine festgelegte Anzahl von Male wiederholt und anh?lt. Dies beinhaltet normalerweise das Hinzufügen der Klassen der Bibliothek, die Anwendung einer Animations -Iterationseigenschaft auf CSS und das Warten auf das Animationend -Ereignis, um die Klassen der Bibliothek zu beseitigen.

Hier ist ein einfaches Beispiel, das dem gleichen Muster folgt, das wir uns früher für schwebende Zust?nde angesehen haben:

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

Funktion tamePulse () {
  pulse.classlist.add ('animiert', 'pulse');
}

pulse.addeventListener ('Animationend', function () {
  pulse.classlist.remove ('animiert', 'pulse');
});

Playpulse ();

Die Bibliotheksklassen werden angewendet, wenn die Playpulse -Funktion aufgerufen wird. Es gibt einen Event -H?rer für das Animationend -Ereignis, mit dem die Klassen der Bibliothek entfernt werden. Normalerweise würde dies nur einmal spielen, aber Sie m?chten vielleicht mehrmals wiederholen, bevor Sie anhalten. 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 {
  Animationsverarbeitungsz?hlung: 3; / * Halten Sie nach dreimal auf *////
}

Auf diese Weise wird die Animation dreimal spielen, bevor sie anh?rt. Wenn wir die Animation früher stoppen mussten, k?nnen wir die Bibliotheksklassen au?erhalb der Animationend -Funktion manuell entfernen. Die Dokumentation der Bibliothek bietet 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 ziemlich einfach, es zu erweitern, um die Iterationszahl auf das Element anzuwenden.

Nehmen wir für einen direkteren Ansatz eine unendliche Animation an, die erst nach einer Art Benutzerinteraktion aufh?rt. Stellen wir so aus, Denken Sie daran, dass Sie jedoch anfangen und stoppen m?chten, dass die Animation bei Ihnen liegt.

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

Bounce.AdDeVentListener ('Click', Function () {
  if (! bounce.classList.contains ('animiert')) {
    Bounce.ClassList.add ('animiert', 'Bounce', 'Infinite');
  } anders {
    Bounce.ClassList.remove ('animiert', 'Bounce', 'Infinite');
  }
});

Einfach genug. Klicken Sie auf die Elementtests, wenn die ?animierte“ Klasse der Bibliothek angewendet wurde. Wenn dies nicht der Fall ist, wenden wir die Bibliotheksklassen an, damit die Animation gestartet wird. Wenn es die Klassen hat, entfernen wir sie, um die Animation zu stoppen. Beachten Sie diese unendliche Klasse am Ende der Klassenliste. Zum Glück bietet Animate.css dies für uns au?erhalb des Boxs. Wenn Ihre Bibliothek einer solchen Klasse nicht anbietet, ben?tigen Sie dies in Ihrem CSS:

 #Bounce {
  Animationsveranstalter: Infinite;
}

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

Sachen aus dem Weg bewegen

Bei der Recherche für diesen Artikel stellte ich fest, dass überg?nge (nicht mit CSS-überg?ngen verwechselt werden) die h?ufigste Art von Animationen in den Bibliotheken von Drittanbietern sind. Dies sind einfache Animationen, die erstellt wurden, damit ein Element die Seite eingeben oder verlassen kann. Ein sehr verbreitetes Muster in modernen Einzelpage -Anwendungen besteht darin, ein Element auf der Seite zu verlassen, w?hrend ein anderes es ersetzt, indem sie die Seite eingeben. Stellen Sie sich das erste Element vor, das ausgeht und das zweite Einleiten. Dies k?nnte darin bestehen, alte Daten durch neue Daten zu ersetzen, sich in einer Sequenz zum n?chsten Feld zu bewegen oder mit einem Router von einer Seite zu einer anderen zu bewegen. Sowohl Sarah Drasner als auch Georgy Marchuk haben hervorragende Beispiele für diese Arten von überg?ngen.

Zum gr??ten Teil bieten Animationsbibliotheken nicht die Mittel zum Entfernen und Hinzufügen von Elementen w?hrend der übergangsanimationen. Die Bibliotheken, die zus?tzliches JavaScript anbieten, haben m?glicherweise tats?chlich diese Funktionalit?t, aber da die meisten dies nicht tun, werden wir jetzt diskutieren, wie diese Funktionalit?t jetzt umgeht.

Einfügen eines einzelnen Elements

In diesem Beispiel werden wir erneut Animate.css als unsere Bibliothek verwenden. In diesem Fall werde ich die Fadeindown -Animation verwenden.

Denken Sie jetzt daran, dass es viele M?glichkeiten gibt, ein Element in das DOM einzufügen, und ich m?chte sie hier nicht abdecken. Ich werde nur zeigen, wie man eine Animation nutzt, um die Einfügung sch?ner und natürlicher zu machen als das Element, das einfach in Sicht kommt. Für Animate.css (und wahrscheinlich viele andere Bibliotheken) ist es recht einfach, ein Element mit der Animation einzuführen.

 lass InsertElement = document.createelement ('div');
InsertElement.
insertElement.classList.add ('animiert', 'fadeindown');

InsertElement.addeVentListener ('Animationend', function () {
  this.classList.remove ('animiert', 'fadeindown');
});

document.body.Append (InsertElement);

Sie entscheiden sich jedoch, das Element zu erstellen. Sie müssen nur sicher sein, dass die erforderlichen Klassen bereits angewendet werden, bevor Sie das Element einfügen. Dann wird es sch?n animieren. Ich habe auch einen Event -Listener für das Animationend -Ereignis aufgenommen, das die Klassen entfernt. Wie üblich gibt es verschiedene M?glichkeiten, dies zu tun, und dies ist wahrscheinlich der direkteste Weg, um damit umzugehen. Der Grund für das Entfernen der Klassen ist es, den Prozess zu vereinfachen, wenn wir m?chten. Wir m?chten nicht, dass die Eintrittsanimation mit einer Abgangsanimation konkurriert.

Ein einzelnes Element entfernen

Das Entfernen eines einzelnen Elements ?hnelt dem Einsetzen eines Elements. Das Element existiert bereits, also wenden wir nur die gewünschten Animationsklassen an. Dann entfernen wir beim Animationend -Ereignis das Element aus dem DOM. In diesem Beispiel werden wir die Fadeoutdown -Animation von Animate.css verwenden, da sie gut mit der Fadeindown -Animation funktioniert.

 lass RemeElement = document.querySelector ('#removeLement');

REMETELEMENT.ADDEVENTLISTENER ('Animationend', Function () {
  this.remove ();
});

remeElement.classlist.add ('animiert', '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 die anderen Elemente auf der Seite herumspringen, um sich anzupassen. Sie müssen dies in irgendeiner Weise berücksichtigen, h?chstwahrscheinlich mit CSS und dem Layout der Seite, um einen st?ndigen Platz für die Elemente zu erhalten.

Ich komme aus dem Weg, ich komme durch!

Jetzt werden wir zwei Elemente austauschen, eine, die ein anderer eintritt. Es gibt verschiedene M?glichkeiten, dies zu behandeln, aber ich werde ein Beispiel geben, das im Wesentlichen die beiden vorherigen Beispiele kombiniert.

Ich werde das JavaScript in Teilen durchgehen, um zu erkl?ren, wie es funktioniert. Zun?chst k?nnen wir einen Verweis auf eine Taste und den Container für die beiden Elemente zwischenspeichern. Dann erstellen wir zwei Kisten, die im Beh?lter ausgetauscht werden.

 Set taste = document.querySelector ('Taste');
container = document.querySelector ('. Container');
lass box1 = document.createelement ('div');
lass box2 = document.createelement ('div');

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

 Lassen Sie removeclasses = function () {
  box1.classlist.remove ('animiert', 'fadeoutright', 'fadeinleft');
  box2.classlist.remove ('animiert', 'fadeoutright', 'fadeinleft');
}

Die n?chste Funktion ist der Gro?teil der Tauschfunktionalit?t. Zun?chst bestimmen wir das aktuelle Box, das angezeigt wird. Basierend darauf k?nnen wir das Verlassen und Eingeben von Elementen abgeben. Das Leaving -Element erh?lt den Ereignish?rer, der die Funktion "Switchelements" zuerst entfernt hat, sodass wir uns nicht in einer Animationsschleife befinden. Dann entfernen wir das Abgangselement aus dem Container, da seine Animation beendet ist. Als n?chstes fügen wir die Animationsklassen zum Eingabelement hinzu und fügen es dem Container hinzu, damit sie an Ort und Stelle anh?lt.

 Lassen Sie SwitchElements = function () {
  let currentElement = document.querySelector ('. Container .box');
  Lassen Sie LeaveElement = currentElement.classList.contains ('Box1')? Box1: Box2;
  ENTERELEMENT = LeaveElement === Box1? Box2: Box1;
  
  LeaveLement.RemoveEventListener ('Animationend', Switchelements);
  Urlaubselement.remove ();
  Enterelement.classList.add ('animiert', 'fadeinleft');
  Container.Append (Enterelement);
}

Wir müssen ein allgemeines Setup für die beiden Kisten durchführen. Au?erdem fügen wir die erste Box an den Container hinzu.

 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, die das Umschalten durchführt. Wie diese Ereignissequenzen begonnen werden, liegt technisch gesehen bei Ihnen. In diesem Beispiel habe ich mich für eine einfache Schaltfl?che entschieden. Ich finde heraus, welcher Box derzeit angezeigt wird, was abreist, um die entsprechenden Klassen anzuwenden, um sie animieren. Anschlie?end wende ich einen Ereignish?rer für das Animationend -Ereignis an, das die oben gezeigte Switchelements -Funktion aufruft, die den tats?chlichen Swap übernimmt.

 Button.AdDeVentListener ('klicken', function () {
  let currentElement = document.querySelector ('. Container .box');
  
  if (currentelement.classlist.contains ('box1')) {
    box1.classlist.add ('animiert', 'fadeoutright');
    Box1.AdDeVentListener ('Animationend', Switchelements);
  } anders {
    box2.classlist.add ('animiert', 'fadeoutright');
    Box2.AdDeVentListener ('Animationend', SwitchElements);
  }
}

Ein offensichtliches Problem mit diesem Beispiel ist, dass es für diese eine Situation extrem hart codiert ist. Es kann jedoch leicht verl?ngert und für verschiedene Situationen angepasst werden. Das Beispiel ist also nützlich, um eine M?glichkeit zu verstehen, eine solche Aufgabe zu erledigen. Zum Glück bieten einige Animationsbibliotheken wie MotionUi JavaScript an, um Elementüberg?nge zu unterstützen. Eine andere Sache zu berücksichtigen ist, dass einige JavaScript -Frameworks wie VueJs Funktionen haben, um die Animationselementüberg?nge zu unterstützen.

Ich habe auch ein weiteres Beispiel erstellt, das ein flexibleres System bietet. Es besteht aus einem Container, der Verweise aufbewahrt und Animationen mit Datenattributen eingeben. Der Container enth?lt zwei Elemente, die den Befehl der Pl?tze schalten. Die Art und Weise, wie dieses Beispiel erstellt wird, ist, dass die Animationen in den Datenattributen über JavaScript leicht ge?ndert werden k?nnen. Ich habe auch zwei Beh?lter in der Demo; Einer mit Animate.css und der andere mit Animista für Animationen. Es ist ein gro?es Beispiel, also werde ich hier den Code nicht untersuchen. Aber es wird stark kommentiert, also schauen Sie sich an, wenn es von Interesse ist.

Nehmen Sie sich einen Moment Zeit, um zu berücksichtigen ...

M?chte jeder all diese Animationen sehen? Einige Leute k?nnten unsere Animationen übertrieben und unn?tig betrachten, aber für andere k?nnen sie tats?chlich Probleme verursachen. Vor einiger Zeit führte Webkit die Medienabfrage zur Besch?ftigungsbewegung ein, um m?gliche Probleme mit der St?rung des vestibul?ren Spektrums zu unterstützen. Eric Bailey ver?ffentlichte auch eine nette Einführung in die Medienabfrage sowie eine Follow-up mit überlegungen für Best Practices. Lesen Sie diese auf jeden Fall.

Unterstützt Ihre Animationsbibliothek der Auswahl die bevorzugte Motion? Wenn die Dokumentation nicht sagt, dass dies der Fall ist, müssen Sie m?glicherweise davon ausgehen, dass dies nicht der Fall ist. Es ist jedoch ziemlich einfach, den Code der Bibliothek zu überprüfen, um festzustellen, ob die Medienabfrage etwas gibt. Zum Beispiel hat Animate.css es in der Teildatei _base.scss.

 @media (drucken), (bevorzugt es mit reduziertem Motion) {{
  .Animated {
    Animation: Uneinig! Wichtig;
    übergang: Keine! Wichtig;
  }
}

Dieser Code -Stück bietet auch ein hervorragendes Beispiel dafür, wie dies für sich selbst zu tun ist, wenn die Bibliothek ihn nicht unterstützt. Wenn die Bibliothek eine gemeinsame Klasse hat, die sie verwendet - wie Animate.css verwendet "animiert" - k?nnen Sie einfach auf diese Klasse abzielen. Wenn es eine solche Klasse nicht unterstützt, müssen Sie für diesen Zweck die tats?chliche Animationsklasse ansprechen oder eine eigene benutzerdefinierte Klasse erstellen.

 .Scale-up-center {
  Animation: Scale-up-Center 0,4S Cubic-Bezier (0,390, 0,575, 0,565, 1.000) beides;
}

@Keyframes Scale-up-Center {
  0% {Transformation: Skala (0,5); }
  100% {Transformation: Skala (1); }
}

@media (drucken), (bevorzugt es mit reduziertem Motion) {{
  .Scale-up-center {
    Animation: Uneinig! Wichtig;
    übergang: Keine! Wichtig;
  }
}

Wie Sie sehen k?nnen, habe ich gerade das von Animate.css bereitgestellte Beispiel verwendet und die Animationsklasse von Animista ausgerichtet. Denken Sie daran, dass Sie dies für jede Animationsklasse wiederholen müssen, die Sie aus der Bibliothek verwenden m?chten. Obwohl er in Erics Follow-up-Stück vorschl?gt, alle Animationen als progressive Verbesserung zu behandeln, k?nnte er eine M?glichkeit sein, sowohl Code zu reduzieren als auch eine bessere Benutzererfahrung zu machen.

Lassen Sie ein Rahmen das schwere Heben für Sie durchführen

In vielerlei Hinsicht k?nnen die verschiedenen Frameworks wie React und Vue die Verwendung von CSS-Animationen von Drittanbietern einfacher machen als mit Vanille-JavaScript, haupts?chlich, weil Sie die Klassen-Swaps oder Animationend-Ereignisse nicht manuell verdrahten müssen. Sie k?nnen die Funktionen, die die Frameworks bereits bieten, nutzen. Das Sch?ne an der Verwendung von Frameworks ist, dass sie je nach den Anforderungen des Projekts auch verschiedene M?glichkeiten zum Umgang mit diesen Animationen bieten. Die folgenden Beispiele sind nur ein kleines Beispiel für Optionen.

Schwebeffekte

Für Schwebeffekte würde ich empfehlen, sie mit CSS (wie ich oben vorgeschlagen habe) als besserer Weg einzubereiten. Wenn Sie wirklich eine JavaScript -L?sung in einem Framework wie Vue ben?tigen, w?re dies so etwas wie folgt:

 <button event>
  Tada
</button>

 Methoden: {
  Over: Funktion (e, Typ) {
    E.Target.ClassList.add ('animiert', Typ);
  },
  Urlaub: Funktion (e, Typ) {
    E.Target.ClassList.remove ('animiert', Typ);
  }
}

Nicht wirklich so viel anders als die obige Vanille -JavaScript -L?sung. Auch wie zuvor gibt es viele M?glichkeiten, dies zu umgehen.

Aufmerksamkeitssuchende

Die Aufmerksamkeitssuchenden aufzubauen ist tats?chlich noch einfacher. In diesem Fall wenden wir nur die Klassen an, die wir erneut ben?tigen, um Vue als Beispiel zu verwenden:

 <div:> Puls 

<div:> Bounce </div:></div:>

Im Pulsbeispiel werden die beiden Klassen angewendet, wenn der boolesche Isspulse wahr ist. Im Bounce -Beispiel werden die animierten und Absprungklassen angewendet, wenn der boolesche isbounce wahr ist. Die unendliche Klasse wird unabh?ngig davon angewendet, sodass wir unseren unendlichen Absprung haben k?nnen, bis der Boolesche Isounce auf false zurückgeht.

überg?nge

Zum Glück bietet die übergangskomponente von VUE eine einfache M?glichkeit, Animationsklassen von Drittanbietern mit benutzerdefinierten übergangsklassen zu verwenden. Andere Bibliotheken wie React k?nnen ?hnliche Funktionen oder Add-Ons bieten. Um die Animationsklassen in Vue zu verwenden, implementieren wir sie nur in der übergangskomponente.

 
  <div v-if="Toggle" key="if"> Wenn Beispiel </div>
  <div v-else key="else"> else Beispiel </div>

Mit Animate.css wenden wir lediglich die erforderlichen Klassen an. Für Enter-Active wenden wir die erforderliche Animationsklasse zusammen mit Fadeindown an. Für den Urlaub wenden wir die erforderliche Animationsklasse 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.

Unter Verwendung von Drittanimationsbibliotheken in einem JavaScript-Framework untersuchen Sie dieses Projekt:

Treten Sie der Party bei!

Dies ist ein kleiner Vorgeschmack auf die M?glichkeiten, die auf Ihr Projekt warten, da es viele, viele CSS-Animationsbibliotheken von Drittanbietern gibt. Einige sind gründlich, exzentrisch, spezifisch, widerw?rtig oder einfach einfach. Es gibt Bibliotheken für komplexe JavaScript -Animationen wie Greensock oder Anime.js. Es gibt sogar Bibliotheken, die auf die Zeichen in einem Element abzielen.

Hoffentlich inspirieren Sie alles, mit diesen Bibliotheken auf dem Weg zum Erstellen Ihrer eigenen CSS -Animationen zu spielen.

Das obige ist der detaillierte Inhalt vonAnimationsbibliotheken von Drittanbietern in ein Projekt integrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!