suchen

Heim >Web-Frontend >CSS-Tutorial >Erstellen einer Filterkomponente mit CSS -Animationen & JQuery

Erstellen einer Filterkomponente mit CSS -Animationen & JQuery

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌Original
2025-02-22 10:19:08140Durchsuche

Erstellen einer Filterkomponente mit CSS -Animationen & JQuery

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.

Erstellen einer Filterkomponente mit CSS -Animationen & JQuery

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.

Erstellen einer Filterkomponente mit CSS -Animationen & JQuery

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!

JavaScript jquery css ajax html define if switch for select require Filter break using class Attribute Property number function default dom this promise viewport transition animation database ui zoom Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die Vorteile der Vererbung über @extend in sassNächster Artikel：Die Vorteile der Vererbung über @extend in sass

In Verbindung stehende Artikel

Mehr sehen