Animationsbibliotheken von Drittanbietern in ein Projekt integrieren

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!