AniJS: Einfache CSS-Animationen ohne Programmierung

() translation by (you can also view the original English article)

Viele Menschen möchten ihrer Website subtile Animationen als Reaktion auf Klicks oder andere Aktionen ihrer Besucher hinzufügen. Allerdings ist nicht jeder mit CSS oder JavaScript vertraut. Einige wissen nur, wie man den HTML-Code ändert und die Änderung auf der Website reflektiert.

Im Allgemeinen ist dies der Teil, in dem Entwickler übernehmen und das notwendige JavaScript und CSS hinzufügen, um Ihre Website hervorstechen zu lassen. Wenn Sie jedoch in der Lage sein möchten, eine animierte Website ohne Programmierung selbst zu erstellen, würde eine Bibliothek namens AniJS sehr hilfreich sein.

Mit AniJS können Sie animiertes Styling für Ihre Website ohne JavaScript- oder CSS-Codierung erstellen! Sie können alle Ihre Animationen aus HTML mit einer einfachen If-On-Do-To-Syntax angeben.

Installation

Bevor Sie mit der Animation der Elemente auf Ihrer Webseite mit data-anijs-Attributen beginnen können, müssen Sie die erforderlichen Dateien einbinden. Drei verschiedene Dateien werden benötigt, um auf alle Funktionen von AniJS zugreifen zu können. Diese Dateien sind die JS-Kernbibliothek, die CSS-Datei für die Animationen und eine weitere JavaScript-Hilfsdatei für die Verwendung spezieller AniJS-Syntax wie $addClass, $toggleClass und $removeClass.

Sie können die Bibliothek auch mit Bower installieren, indem Sie den folgenden Befehl ausführen:

1	bower install anijs --save

Sobald Sie alle notwendigen Dateien eingefügt haben, sind die Elemente auf Ihrer Webseite animiert zu werden.

Erste Schritte mit der AniJS-Syntax

In seiner Grundform verwendet AniJS die folgende Syntax, um bestimmte Elemente auf der Grundlage eines beliebigen Ereignisses zu animieren.

1	If (any event happens), On (any element), Do (something like animate, add/remove class), To (this or any other element)

Hier gibt der If-Teil das Ereignis an, das die Animation oder Klassenbearbeitung auslöst. Der On-Teil gibt das Element an, dessen Ereignisse AniJS abhören soll. Dies kann sich von dem Element unterscheiden, für das Sie das data-anijs-Attribut eingerichtet haben. Der Do-Teil gibt die auszuführende Aktion an. Hier können Sie den Namen der Animation angeben, die Sie anwenden möchten usw. Schließlich wird der To-Teil verwendet, um das Element anzugeben, das animiert oder manipuliert werden muss.

Der If-Teil ist für die AniJS-Anweisung erforderlich, die Sie hinzufügen, um ein beliebiges Element zu animieren. Der On-Teil ist optional und verwendet, wenn es nicht angegeben ist, das aktuelle Element als Standardwert. Der Do-Teil ist ebenfalls erforderlich, da er dem Browser mitteilt, was zu tun ist, wenn das angegebene Ereignis eintritt. Der To-Teil ist ebenfalls optional und wird standardmäßig auf das aktuelle Element festgelegt, wenn er nicht angegeben ist.

Sie können auch die Before- und After-Hooks verwenden, um anzugeben, was passieren soll, bevor und nachdem AniJS ausführt, was im Do-Teil erwähnt wird.

Animieren verschiedener Elemente

Mit AniJS können Sie eine Animation ausführen, indem Sie sie bei jedem anwendbaren Ereignis auslösen, das auf der MDN-Seite aufgeführt ist. In ähnlicher Weise können Sie mit on und to jedes beliebige Element mit CSS-Selektoren anvisieren. Sie können beispielsweise angeben, dass Sie ein Ereignis auf div.promotion oder in section div p.first usw. warten möchten. Der do-Teil kann verwendet werden, um die Animation anzugeben, die Sie auf verschiedene Elemente anwenden möchten. AniJS hat viele Animationen, die auf jedes gewünschte Element angewendet werden können.

Das folgende HTML-Snippet zeigt Ihnen, wie Sie einige Animationen auf Elemente anwenden, die bei bestimmten Ereignissen ausgelöst werden.

<div class="orange box" data-anijs="if: mouseover, do: swing animated"></div>
<div class="pink box" data-anijs="if: click, do: tada animated"></div>
<div class="red box" data-anijs="if: dblclick, do: rubberBand animated"></div>
<div class="purple box" data-anijs="if: mousemove, do: shake animated"></div>
<div class="black box" data-anijs="if: mouseover, on: body div.green, do: flash animated"></div>
<div class="green box" data-anijs="if: mouseover, on: div.brown, do: fadeIn animated"></div>
<div class="yellow box" data-anijs="if: dblclick, on: body, do: bounce animated"></div>
<div class="brown box" data-anijs="if: click, on: div, do: wobble animated"></div>

In jedem Fall müssen Sie nur die Anweisungen in das data-anijs-Attribut schreiben und die Bibliothek kümmert sich um den Rest. (Wir haben das to-Teil in all diesen Animationen übersprungen, damit die Animation auf das Element angewendet wird, in dem wir das data-anijs-Attribut angegeben haben.)

Die letzten vier Boxen haben unterschiedliche Werte für den on-Teil. Dies bedeutet zum Beispiel, dass die Animation auf dem grünen Feld nur dann erfolgt, wenn die Maus über das braune Feld bewegt wird. In ähnlicher Weise beginnt die Bounce-Animation auf dem gelben Feld abzuspielen, wenn ein Benutzer irgendwo im body doppelklickt.

Sie können diese Animationen in der eingebetteten CodePen-Demo selbst ausprobieren.

Bearbeiten von Klassen und HTML-Elementen

Mit AniJS können Sie mehr tun, als nur verschiedene Elemente zu animieren. Sie können damit beispielsweise Klassen hinzufügen, entfernen oder umschalten, die auf verschiedene Elemente angewendet werden. Ebenso können Sie HTML-Elemente entfernen oder klonen, ohne eine einzige Zeile JavaScript hinzuzufügen. Die Bibliothek ermöglicht es Ihnen auch, das DOM mit speziellen reservierten Schlüsselwörtern zu durchlaufen.

Beginnen wir mit der Klassenmanipulation. AniJS verfügt über drei reservierte Schlüsselwörter zum Bearbeiten von Klassen. Dies sind $addClass, $removeClass und $toggleClass. Wie der Name schon sagt, können Sie sie verwenden, um eine oder mehrere Klassen eines Elements hinzuzufügen, zu entfernen und umzuschalten. Alles, was Sie tun müssen, ist, die Klassennamen nach den reservierten Schlüsselwörtern anzugeben.

Ebenso können Sie reservierte Schlüsselwörter wie $parent, $ancestors, $closest, $find und $children verwenden, um das DOM zu durchlaufen.

Sie können diese beiden Sätze reservierter Schlüsselwörter zusammen verwenden, zum Beispiel: Hinzufügen einer bestimmten Klasse zu allen untergeordneten Elementen eines Elements, nachdem ein Besucher auf dieses bestimmte Element doppelklickt. Auf welche Kinder Sie sich beziehen, kann jedoch in bestimmten Fällen mehrdeutig sein. Beispielsweise haben Sie möglicherweise das data-anijs-Attribut auf ein Element angewendet, aber den Wert von On-Teil mithilfe von CSS-Selektoren auf etwas anderes festgelegt. In dieser speziellen Situation hat AniJS keine Möglichkeit zu wissen, ob die Klasse den untergeordneten Elementen des Elements hinzugefügt werden muss, auf das der CSS-Selektor verweist, oder des Elements, auf das Sie das data-anijs-Attribut angewendet haben. In solchen Fällen können Sie die Mehrdeutigkeit beseitigen, indem Sie ein anderes reserviertes Schlüsselwort namens target verwenden. Hier bezieht sich target auf das Element, auf das der CSS-Selektor verweist.

Betrachten Sie die folgenden drei Beispiele, in denen AniJS zum Umschalten von Klassen verschiedener Elemente verwendet wurde:

<div class="box" 
     data-anijs="if: click,
                 do: $toggleClass orange"></div>

<div class="box second" 
     data-anijs="if: click,
                 do: $toggleClass red,
                 to: $children">
  <span class="shells"></span>
  <!-- Many more span tags -->
  <span class="shells"></span>
</div>

<div class="box" 
     data-anijs="if: click, 
                 on: .shells,
                 do: $toggleClass yellow, 
                 to: $parent target;
                 if: click,
                 on: .shells,
                 do: $toggleClass yellow,
                 to: $parent"></div>

Im obigen Beispiel habe ich den HTML-Code neu formatiert, um das Lesen und Sehen zu erleichtern.

Beginnen wir mit dem ersten div. In diesem Fall haben wir sowohl den on- als auch den to-Teil des data-anijs-Attributwerts weggelassen. Daher verwenden beide standardmäßig das aktuelle div selbst. Wenn Sie versuchen, auf dieses bestimmte div zu klicken, wird die orange Klasse umgeschaltet, was wiederum das Feld in orange ändert.

Im Falle des zweiten div sagen wir AniJS, dass die Klasse red für alle Elemente, die untergeordnete Elemente dieses speziellen divs sind, umgeschaltet werden soll. Dadurch werden alle untergeordneten span-Elemente gedreht und ihre Farbe in Rot geändert, während der border-radius auf Null gesetzt wird.

Wir haben zwei verschiedene Anweisungen innerhalb des data-anijs-Attributs des dritten div. Beide Anweisungen schalten die gleiche yellow Klasse um. Die Effekte sind jedoch aufgrund der Verwendung des target-Keywords völlig unterschiedlich.

Im ersten Fall haben wir das target-Keyword nach dem $parent-Keyword hinzugefügt. Dadurch wird AniJS angewiesen, dass wir die Klasse für das übergeordnete Element der Elemente, auf die die shells-Klasse zeigt, umschalten möchten. Im zweiten Fall haben wir das target-Keyword übersprungen, so dass AniJS den Hintergrund des übergeordneten Elements des aktuellen div ändert. Da das übergeordnete Element des div der body selbst ist, wird die gesamte Seite gelb.

Sie können versuchen, auf verschiedene Elemente zu klicken und zu sehen, wie sie sich auf die Seite in der eingebetteten CodePen-Demo auswirken.

Eine weitere Sache, die es wert ist, sich zu merken, ist, dass, obwohl das data-anijs-Attribut für das dritte Feld zwei Anweisungen hat, das Klicken auf das Feld selbst keine Auswirkungen hat. Dies liegt daran, dass wir Anijs angewiesen haben, in beiden Fällen die Click-Ereignisse in den span-Elementen mit der Klasse shell zu überwachen.

Andere Möglichkeiten zum Bearbeiten von HTML

Eine andere Möglichkeit, HTML-Elemente auf einer Webseite mit AniJS zu bearbeiten, wäre das Klonen oder Entfernen. Die Bibliothek hat die Schlüsselwörter $remove und $clone reserviert, die ihr sagen, ob Sie ein Element entfernen oder klonen möchten.

Sie können mehrere Selektoren an $remove übergeben, um mehrere Elemente von der Webseite zu entfernen. Beachten Sie, dass verschiedene CSS-Selektoren mit der Pipe getrennt werden müssen, dem | Zeichen.

Das Schlüsselwort $clone akzeptiert auch zwei Parameter. Der erste ist der CSS-Selektor, um das Element anzugeben, das Sie klonen möchten. Die zweite ist eine Zahl, um anzugeben, wie viele Kopien Sie erstellen möchten. Beispielsweise erstellen $clone .shells|10 10 Kopien der Elemente mit der Klasse shell und hängen sie als untergeordnete Elemente des Elements an, für das das data-anijs-Attribut angegeben wurde. Wenn die Kopien an ein anderes Element angehängt werden müssen, können Sie AniJS darauf verweisen, indem Sie in der AniJS-Anweisung den entsprechenden CSS-Selektor nach to angeben.

Schlussfolgerung

Das Ziel dieses Tutorials war es, Ihnen so schnell wie möglich den Einstieg in AniJS zu erleichtern. Wie Sie vielleicht bemerkt haben, ist die Bibliothek sehr einfach zu bedienen. Alles, was Sie tun müssen, ist die richtigen Attributwerte anzugeben, und AniJS kümmert sich um alles andere, z. B. das Ändern von Klassen, das Manipulieren des DOM und das Animieren von Änderungen.

Die Bibliothek bietet viele andere Funktionen, die wir in diesem Tutorial nicht behandelt haben. Sie sollten die offizielle Dokumentation durchgehen, um mehr darüber zu erfahren und ihr volles Potenzial auszuschöpfen.