Vor einigen Monaten schrieb ich einen Artikel über Mixitup, ein beliebtes Jquery -Plugin zum Filtern und Sortieren. In dem heutigen Artikel zeige ich Ihnen, wie Sie Ihre eigene einfache filterbare Komponente mit JQuery- und CSS -Animationen erstellen.

ohne weiteres, fangen wir an!

Key Takeaways

• Das Tutorial zeigt, wie eine filterbare Komponente mit JQuery- und CSS -Animationen erstellt wird. Beginnend mit der Einrichtung der HTML -Struktur mit Filtertasten und Elementen, die gefiltert werden, gruppiert in Kategorien.
• Das CSS -Setup umfasst die Zuweisung der "aktiven" Klasse der Filtertaste, die der Kategorie Active Filter entspricht, wobei Flexbox das Layout für die Zielelemente erstellt und zwei verschiedene CSS -Keyframe -Animationen definiert werden, um die Elemente anzuzeigen.
• Das JQuery-Setup umfasst das Schreiben von Code, um Klick-Ereignisse auf Filtertasten zu verarbeiten, die "aktive" Klasse von allen Schaltfl?chen zu entfernen und sie nur dem ausgew?hlten zuzuweisen, den Wert des Datenfilter-Attributs der Taste zu rufen und auszuwerten CSS -Animationen, um Elemente basierend auf dem ausgew?hlten Filter anzuzeigen oder zu verbergen.
• Das Tutorial zeigt auch, wie der Code so ge?ndert wird, dass die Elemente nacheinander animieren, wobei die Methode jeder () durch die Zielelemente und die Verz?gerungsmethode zur Festlegung der Millisekunden -Millisekunden eingestellt werden kann. Jedes Element sollte warten, bevor Sie einleiten.

Einrichten des HTML

Als erster Schritt zeige ich Ihnen die HTML -Struktur der Komponente. Betrachten Sie das folgende Markup:

<span><span><span><div</span> class<span>="cta filter"</span>></span>
</span>  <span><span><span><a</span> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></span>Show All<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Green Boxes<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Blue Boxes<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Red Boxes<span><span></a</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="boxes"</span>></span>
</span>  <span><span><span><a</span> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></span>Box1<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></span>Box2<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></span>Box3<span><span></a</span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></div</span>></span></span>

Beachten Sie, dass ich ein ziemlich grundlegendes Markup eingerichtet habe. Hier ist eine Erkl?rung dafür:

• Zuerst habe ich die Filtertasten und die Elemente definiert, die ich filtern m?chte (wir nennen sie Zielelemente).
• Als n?chstes habe ich die Zielelemente in drei Kategorien (blau, grün und rot) zusammengefasst und ihnen das Attribut für die Datenkategorie gegeben. Der Wert dieses Attributs bestimmt die Kategorie, zu der jedes Element geh?rt.
• Ich habe das Data-Filter-Attribut auch den Filtertasten zugewiesen. Der Wert dieses Attributs gibt die gewünschte Filterkategorie an. Beispielsweise zeigt die Schaltfl?che mit dem Attribut/dem Wert von Data-filter = "Red" nur die Elemente, die zur roten Kategorie geh?ren. Andererseits zeigt die Schaltfl?che mit Data-filter = "All" alle Elemente.

Jetzt, da Sie einen überblick über die erforderlichen HTML hatten, k?nnen wir die CSS untersuchen.

Einrichten des CSS

Jedes Mal, wenn eine Filterkategorie aktiv ist, empf?ngt die entsprechende Filtertaste die aktive Klasse. Standardm??ig erh?lt die Schaltfl?che mit dem Data-filter = "All" -attribut diese Klasse.

Hier sind die zugeh?rigen Stile:

<span><span>.filter a</span> {
</span>  <span>position: relative;
</span><span>}
</span>
<span><span>.filter a.active:before</span> {
</span>  <span>content: '';
</span>  <span>position: absolute;
</span>  <span>left: 0;
</span>  <span>top: 0;
</span>  <span>display: inline-block;
</span>  <span>width: 0;
</span>  <span>height: 0;
</span>  <span>border-style: solid;
</span>  <span>border-width: 15px 15px 0 0;
</span>  <span>border-color: #333 transparent transparent transparent;
</span><span>}</span>

Au?erdem werde ich Flexbox verwenden, um das Layout für die Zielelemente zu erstellen.

Siehe die zugeh?rigen Stile unten:

<span><span><span><div</span> class<span>="cta filter"</span>></span>
</span>  <span><span><span><a</span> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></span>Show All<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Green Boxes<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Blue Boxes<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Red Boxes<span><span></a</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="boxes"</span>></span>
</span>  <span><span><span><a</span> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></span>Box1<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></span>Box2<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></span>Box3<span><span></a</span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></div</span>></span></span>

Schlie?lich definiere ich zwei verschiedene CSS -Keyframe -Animationen, die ich sp?ter verwenden werde, um die Elemente zu enthüllen:

<span><span>.filter a</span> {
</span>  <span>position: relative;
</span><span>}
</span>
<span><span>.filter a.active:before</span> {
</span>  <span>content: '';
</span>  <span>position: absolute;
</span>  <span>left: 0;
</span>  <span>top: 0;
</span>  <span>display: inline-block;
</span>  <span>width: 0;
</span>  <span>height: 0;
</span>  <span>border-style: solid;
</span>  <span>border-width: 15px 15px 0 0;
</span>  <span>border-color: #333 transparent transparent transparent;
</span><span>}</span>

Mit dem Markup und dem CSS k?nnen wir das JavaScript/JQuery bauen.

Einrichten der JQuery

schauen Sie sich den Code unten an, wonach ich erkl?ren werde, was passiert:

<span><span>.boxes</span> {
</span>  <span>display: flex;
</span>  <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.boxes a</span> {
</span>  <span>width: 23%;
</span>  <span>border: 2px solid #333;
</span>  <span>margin: 0 1% 20px 1%;
</span>  <span>line-height: 60px;
</span><span>}</span>

Jedes Mal, wenn eine Filtertaste geklickt wird, geschieht Folgendes:

• Die aktive Klasse wird aus allen Schaltfl?chen entfernt und nur der ausgew?hlten Taste zugeordnet.
• Der Wert des Datenfilterattributs der Taste wird abgerufen und ausgewertet.
• Wenn der Wert von Data-Filter alles ist, sollten alle Elemente angezeigt werden. Um dies zu tun, verstecke ich sie zuerst und dann zeige ich sie mit den Animationen für Rotate-Rechts- oder Zoom-in-CSS-Animationen, wenn alle Elemente versteckt werden.
• Wenn der Wert nicht alle ist, sollten die Zielelemente der entsprechenden Kategorie erscheinen. Dazu verstecke ich zuerst alle Elemente und zeige dann, wenn sie alle versteckt werden, nur die Elemente der zugeh?rigen Kategorie mithilfe der Animationen für Rotate-Right- oder Zoom-in-CSS.
.

Zu diesem Zeitpunkt ist es wichtig, eine Sache zu kl?ren. Beachten Sie die Syntax für die Fadeout () -Methode im obigen Code. Es sieht wie folgt aus:

<span><span>@keyframes zoom-in</span> {
</span>  <span>0% {
</span>   <span>transform: scale(.1);
</span>  <span>}
</span>  <span>100% {
</span>    <span>transform: none;
</span>  <span>}
</span><span>}
</span>
<span><span>@keyframes rotate-right</span> {
</span>  <span>0% {
</span>    <span>transform: translate(-100%) rotate(-100deg);
</span>  <span>}
</span>  <span>100% {
</span>    <span>transform: none;
</span>  <span>}
</span><span>}
</span>
<span><span>.is-animated</span> {
</span>  <span>animation: .6s zoom-in;
</span>  // <span>animation: .6s rotate-right; 
</span><span>}</span>

Sie sind mit dieser Syntax wahrscheinlich besser vertraut:

<span>var $filters = $('.filter [data-filter]'),
</span>    $boxes <span>= $('.boxes [data-category]');
</span>
$filters<span>.on('click', function(e) {
</span>  e<span>.preventDefault();
</span>  <span>var $this = $(this);
</span>  $filters<span>.removeClass('active');
</span>  $<span>this.addClass('active');
</span>
  <span>var $filterColor = $this.attr('data-filter');
</span>
  <span>if ($filterColor == 'all') {
</span>    $boxes<span>.removeClass('is-animated')
</span>      <span>.fadeOut().promise().done(function() {
</span>        $boxes<span>.addClass('is-animated').fadeIn();
</span>      <span>});
</span>  <span>} else {
</span>    $boxes<span>.removeClass('is-animated')
</span>      <span>.fadeOut().promise().done(function() {
</span>        $boxes<span>.filter('[data-category = "' + $filterColor + '"]')
</span>          <span>.addClass('is-animated').fadeIn();
</span>      <span>});
</span>  <span>}
</span><span>});</span>

Diese Deklarationen haben unterschiedliche Bedeutungen:

Im ersten Fall wird der Rückruf erst ausgeführt, nachdem alle Zielelemente verborgen sind. Weitere Informationen zu diesem Ansatz erfahren Sie, indem Sie den Abschnitt "Promise () von JQuery's Docs besuchen.
Im zweiten Fall wird der Rückruf mehrmals abgefeuert. Insbesondere wird es jedes Mal ausgeführt, wenn ein Element verborgen wird.

Die folgende Demo verwendet die Zoom-In-Animation:

Siehe Stift eine Sortier-/Filterkomponente mit CSS und JQuery (mit Zoomanimation) von SitePoint (@sinepoint) auf CodePen.

und diese Demo verwendet die Dreh-Rechts-Animation:

Siehe Stift eine Sortier-/Filterkomponente mit CSS und JQuery (mit Drehanimation) von SitePoint (@sinepoint) auf CodePen.

Natürlich sind die oben genannten CSS -Animationen optional. Wenn Ihnen diese spezifischen Animationen nicht gefallen, k?nnen Sie sie frei entfernen und die Elemente nur mit der Fadein () -Methode von JQuery aufzeigen.

Jetzt, da Sie verstehen, wie die Komponente funktioniert, zeige ich Ihnen, wie Sie eine andere Variation davon erstellen.

nacheinander animierende Elemente

Bisher haben Sie vielleicht festgestellt, dass alle Elemente gleichzeitig erscheinen. Ich werde jetzt den Code ?ndern, um sie nacheinander anzeigen:

<span><span><span><div</span> class<span>="cta filter"</span>></span>
</span>  <span><span><span><a</span> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></span>Show All<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Green Boxes<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Blue Boxes<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></span>Show Red Boxes<span><span></a</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="boxes"</span>></span>
</span>  <span><span><span><a</span> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></span>Box1<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></span>Box2<span><span></a</span>></span>
</span>  <span><span><span><a</span> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></span>Box3<span><span></a</span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></div</span>></span></span>

Der obige Code ?hnelt dem vorherigen, aber es gibt einige unterschiedliche Unterschiede:

• Zun?chst verwende ich die Methode jeder (), um die Zielelemente zu iterieren. Au?erdem erhalte ich w?hrend des Schleifens den Index des aktuellen Elements (das auf Null basiert) und multipliziere ihn mit einer Zahl (z. B. 200). Die abgeleitete Nummer wird als Argument an die Verz?gerungsmethode übergeben. Diese Zahl gibt die Menge an Millisekunden an, die jedes Element warten sollte, bevor sie verblassen.
• Als n?chstes verwende ich die methode finde (), um die derzeit laufenden Animationen für die ausgew?hlten Elemente in bestimmten F?llen zu stoppen. Um seine Verwendung zu verstehen, hier ist ein Szenario: Klicken Sie auf eine Filterschaltfl?che und klicken Sie dann erneut auf die Schaltfl?che. Sie werden feststellen, dass alle Elemente verschwinden. Führen Sie diesen Test nach dem Entfernen der beiden Instanzen dieser Methode erneut durch. In einem solchen Fall werden Sie feststellen, dass die Elemente einige unerwünschte Effekte erhalten. Manchmal kann es schwierig sein, diese Methode richtig zu bezeichnen. Für dieses Beispiel musste ich ein wenig experimentieren, bis ich fand, wo ich es platzieren sollte.

Die Demo unten animiert die gefilterten Elemente nacheinander mit der Zoom-In-Animation:

Siehe die sequentielle Filter-/Sortierkomponente der Stift mit CSS & JQuery von SitePoint (@sinepoint) auf CodePen.

Die Demo unten animiert die gefilterten Elemente nacheinander mit der Dreh-Rechts-Animation:

Siehe die sequentielle Filterung/Sortierung von Pen mit CSS und JQuery von SitePoint (@sinepoint) auf CodePen.

Schlussfolgerung

Diese Komponente k?nnte ohne JQuery erstellt werden und kann eine bessere Leistung haben. Die M?glichkeit, die Methoden von Jquery von Fadein () und Fadeout () zu verwenden, erm?glicht einen einfacheren Code, der bestimmte Funktionen für JQuery nutzt.

Lassen Sie mich in den Kommentaren wissen, ob Sie eine andere L?sung haben oder den Code verbessern.

h?ufig gestellte Fragen (FAQs) zum Erstellen einer Filterkomponente mit CSS -Animationen & jQuery

Wie kann ich der Komponente mehr Filter hinzufügen? Sie müssen den neuen Filter in Ihrem CSS definieren und dann die entsprechende Funktionalit?t in Ihren jQuery -Code hinzufügen. Wenn Sie beispielsweise einen "Graustufen" -Filter hinzufügen m?chten, würden Sie ihn zun?chst in Ihrem CSS wie folgt definieren:

.Filter-GrayScale {
Filter: Grautruppe (100%);
}

In Ihrem jQuery -Code würden Sie Ihrer Switch -Anweisung einen neuen Fall hinzufügen, um das neue zu verarbeiten Filter:

Switch (Filter) {
// Vorhandene F?lle ...
Fall 'Grayscale':
$ Container.AddClass ('Filter-Grauenscale');
Break .

Kann ich diese Filterkomponente mit anderen JavaScript -Bibliotheken verwenden?

Ja, Sie k?nnen diese Filterkomponente mit anderen JavaScript -Bibliotheken verwenden. JQuery ist so konzipiert, dass er mit anderen Bibliotheken kompatibel ist. Sie müssen nur sicherstellen, dass es keine Konflikte zwischen den verschiedenen Bibliotheken gibt. Wenn es Konflikte gibt, k?nnen Sie die Noconflict () -Methode von JQuery verwenden, um sie zu vermeiden. Diese Methode setzt den Halt an der Identifikatorin "= Verknüpfung" frei, mit der andere Bibliotheken es verwenden k?nnen. Sie k?nnen dann den vollst?ndigen Namen von JQuery verwenden, um seine Methoden aufzurufen.

Wie kann ich den übergang zwischen Filtern animieren? Sie müssen dem Element, das Sie animieren m?chten, eine übergangseigenschaft hinzufügen. Diese Eigenschaft gibt die CSS -Eigenschaft zum übergang, die Dauer des übergangs, die Zeitfunktion und die Verz?gerung vor Beginn des übergangs an. Wenn Sie beispielsweise den übergang der Filtereigenschaft über 1 Sekunde animieren m?chten, würden Sie das folgende CSS hinzufügen:

.Container {
übergang: Filter 1S;
}


Wenn Sie den Filter mit JQuery ?ndern, wird der übergang animiert.

Kann ich diese Filterkomponente für mehrere Elemente auf demselben verwenden Seite?

Ja, Sie k?nnen diese Filterkomponente auf mehreren Elementen auf derselben Seite verwenden. Sie müssen nur sicherstellen, dass jedes Element eine eindeutige ID oder Klasse hat, mit der Sie es mit JQuery ausw?hlen k?nnen. Anschlie?end k?nnen Sie die Filterkomponente einzeln auf jedes Element anwenden. Ansichtsfenster. Sie k?nnen CSS Media -Abfragen verwenden, um verschiedene Stile für verschiedene Ansichtsfenster anzuwenden. In Ihrem jQuery -Code k?nnen Sie die Methode $ (Fenster) .Resize () verwenden, um Code auszuführen, wenn das Fenster ge?ndert wird. Sie k?nnen dann die Filter basierend auf der neuen Gr??e des Fensters einstellen.

Kann ich CSS -Animationen ohne jQuery verwenden? CSS -Animationen sind eine Funktion von CSS und ben?tigen kein JavaScript. JQuery kann es jedoch erleichtern, Animationen zu verwalten und zu steuern, insbesondere wenn Sie komplexe Animationen haben oder Elemente als Antwort auf Benutzeraktionen animieren m?chten.

Wie kann ich einen benutzerdefinierten Filter hinzufügen?

Hinzufügen eines benutzerdefinierten Filters beinhaltet die Definition einer neuen CSS -Klasse mit dem gewünschten Filtereffekt und dann die entsprechende Funktionalit?t in Ihrem JQuery -Code. Der Prozess ?hnelt dem Hinzufügen weiterer Filter, wie in der Antwort auf Frage 1.

beschrieben

Kann ich diese Filterkomponente mit dynamischem Inhalt verwenden?

Ja, Sie k?nnen diese Filterkomponente mit dynamischem Inhalt verwenden. Sie müssen nur sicherstellen, dass die Filterkomponente nach dem Laden auf den Inhalt angewendet wird. Sie k?nnen dies tun, indem Sie die Filterkomponente in der Rückruffunktion Ihrer AJAX -Anforderung oder in der Funktion von $ (Dokument) () () aufrufen, wenn Sie den Inhalt laden, wenn die Seite geladen wird.

Wie kann ich optimieren Die Leistung der Filterkomponente? Eine Strategie besteht darin, die Anzahl der DOM -Manipulationen zu minimieren. Jedes Mal, wenn Sie eine Klasse mit JQuery hinzufügen oder entfernen, wird der Browser das Layout neu berechnet, was teuer sein kann. Um dies zu minimieren, k?nnen Sie Ihre ?nderungen zusammen gruppieren und sie alle auf einmal vornehmen. Eine andere Strategie besteht darin, CSS -überg?nge anstelle von JQuery -Animationen zu verwenden, da CSS -überg?nge im Allgemeinen leistungsf?higer sind.

Kann ich diese Filterkomponente mit einer Backend -Datenbank verwenden? Komponente mit einer Backend -Datenbank. Sie müssten eine AJAX -Anforderung an den Server stellen, um die Daten aus der Datenbank abzurufen, und dann JQuery verwenden, um die Filterkomponente auf die Daten anzuwenden. Auf diese Weise k?nnen Sie Daten basierend auf den in der Datenbank gespeicherten Kriterien filtern.

Das obige ist der detaillierte Inhalt vonErstellen einer Filterkomponente mit CSS -Animationen & JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!