Construire un composant de filtrage avec CSS Animations et JQuery

Il y a quelques mois, j'ai écrit un article sur Mixitup, un plugin jQuery populaire pour le filtrage et le tri. Dans l'article d'aujourd'hui, je vais vous montrer comment construire votre propre composant filtrable simple avec jQuery et CSS Animations.

sans plus tarder, commençons!

Les plats clés

• Le tutoriel montre comment créer un composant filtrable à l'aide d'animations jQuery et CSS, en commençant par la configuration de la structure HTML avec des boutons de filtre et des éléments à filtrer, regroupés en catégories.
• La configuration CSS implique d'attribuer la classe «active» au bouton Filtre correspondant à la catégorie de filtre actif, en utilisant Flexbox pour créer la mise en page pour les éléments cibles et en définissant deux animations clés CSS différentes pour révéler les éléments.
• La configuration jQuery implique d'écrire du code pour gérer les événements de clic sur les boutons de filtre, de supprimer la classe `` active '' de tous les boutons et de l'attribuer uniquement à celui sélectionné, en récupérant et en évaluant la valeur de l'attribut de filtre de données du bouton, et en utilisant Animations CSS pour afficher ou masquer des éléments en fonction du filtre sélectionné.
• Le didacticiel montre également comment modifier le code pour animer séquentiellement les éléments, en utilisant la méthode chaque () pour itérer à travers les éléments cibles et la méthode de retard pour définir la quantité de millisecondes que chaque élément devrait attendre avant de disparaître.

Configuration du html

En première étape, je vais vous montrer la structure HTML du composant. Considérez le balisage suivant:

<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>

Notez que j'ai mis en place un balisage assez basique. Voici une explication:

• Tout d'abord, j'ai défini les boutons de filtre et les éléments que je souhaite filtrer (nous les appellerons des éléments cibles).
• Ensuite, j'ai regroupé les éléments cibles en trois catégories (bleu, vert et rouge) et je leur ai donné l'attribut de catégorie de données. La valeur de cet attribut détermine la catégorie à laquelle appartient chaque élément.
• J'ai également attribué l'attribut de filtre de données aux boutons de filtre. La valeur de cet attribut spécifie la catégorie de filtre souhaitée. Par exemple, le bouton avec Data-Filter = "Red" Attribut / Value affichera uniquement les éléments qui appartiennent à la catégorie rouge. D'un autre côté, le bouton avec Data-Filter = "All" affichera tous les éléments.

Maintenant que vous avez eu un aperçu du HTML requis, nous pouvons continuer à explorer le CSS.

Configuration du CSS

Chaque fois qu'une catégorie de filtre est active, son bouton de filtre correspondant reçoit la classe active. Par défaut, le bouton avec l'attribut Data-Filter = "all" obtient cette classe.

Voici les styles associés:

<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>

De plus, je vais utiliser Flexbox pour créer la disposition des éléments cibles.

Voir les styles connexes ci-dessous:

<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>

Enfin, je définis deux animations différentes de l'image clé CSS que j'utiliserai plus tard pour révéler les éléments:

<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>

Avec le balisage et le CSS en place, nous pouvons commencer à construire le javascript / jQuery.

Configuration du jQuery

Jetez un œil au code ci-dessous, après quoi je vais expliquer ce qui se passe:

<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>

Chaque fois qu'un bouton de filtre est cliqué, ce qui suit se produit:

• La classe active est supprimée de tous les boutons et affectée uniquement au bouton sélectionné.
• La valeur de l'attribut de filtre de données du bouton est récupérée et évaluée.
• Si la valeur du filtre de données est tout, tous les éléments doivent apparaître. Pour ce faire, je les cache d'abord, puis, lorsque tous les éléments deviennent cachés, je les montre en utilisant les animations CSS Rotate-droite ou zoom-in.
• Si la valeur n'est pas tout, les éléments cibles de la catégorie correspondante doivent apparaître. Pour ce faire, je cache d'abord tous les éléments et puis, lorsque tous deviennent cachés, je ne montre que les éléments de la catégorie associée en utilisant les animations rotatines-droite ou zoom-in CSS.

À ce stade, il est important de clarifier une chose. Remarquez la syntaxe de la méthode Fadeout () dans le code ci-dessus. Il semble comme suit:

<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>

Vous êtes probablement plus familier avec cette syntaxe:

<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>

Ces déclarations ont des significations différentes:

• Dans le premier cas, le rappel n'est exécuté qu'après que tous les éléments cibles se cachent. Vous pouvez en savoir plus sur cette approche en visitant la section Promise () des documents de jQuery.
• Dans le deuxième cas, le rappel est licencié plusieurs fois. Plus précisément, il est exécuté chaque fois qu'un élément se cache.

La démo ci-dessous utilise l'animation de zoom-in:

Voir le composant de tri / filtrage du stylo avec CSS et jQuery (avec animation zoom) par SitePoint (@SitePoint) sur codepen.

Et cette démo utilise l'animation rotative droite:

Voir le composant de tri / filtrage du stylo avec CSS et JQuery (avec animation rotative) par SitePoint (@SitePoint) sur Codepen.

Bien sûr, les animations CSS susmentionnées sont facultatives. Si vous n'aimez pas ces animations spécifiques, n'hésitez pas à les supprimer et à révéler les éléments en utilisant uniquement la méthode Fadein () de JQuery.

Maintenant que vous comprenez comment le composant fonctionne, je vais vous montrer comment en créer une variation différente.

Animer les éléments séquentiellement

Jusqu'à présent, vous avez peut-être remarqué que tous les éléments apparaissent en même temps. Je vais maintenant modifier le code pour les montrer séquentiellement:

<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>

Le code ci-dessus ressemble à la précédente, mais il y a quelques différences distinctes:

• Tout d'abord, j'utilise la méthode chaque () pour parcourir les éléments cibles. De plus, à mesure qu'il boucle, j'obtiens l'index de l'élément actuel (qui est basé sur zéro) et le multipliez par un nombre (par exemple 200). Le nombre dérivé est passé comme argument à la méthode de retard. Ce nombre indique la quantité de millisecondes dans laquelle chaque élément doit attendre avant de disparaître.
• Ensuite, j'utilise la méthode finition () pour arrêter les animations actuellement en cours pour les éléments sélectionnés dans des cas spécifiques. Pour comprendre son utilisation, voici un scénario: cliquez sur un bouton Filtre, puis, avant que tous les éléments n'apparaissent, cliquez à nouveau sur le bouton. Vous remarquerez que tous les éléments disparaissent. De même, exécutez à nouveau ce test après avoir retiré les deux instances de cette méthode. Dans un tel cas, vous verrez que les éléments reçoivent des effets indésirables. Parfois, appeler cette méthode peut être délicat. Pour cet exemple, j'ai dû expérimenter un peu jusqu'à ce que je trouve où je devrais le placer.

La démo ci-dessous anime les éléments filtrés séquentiellement à l'aide de l'animation de zoom-in:

Voir le composant de filtrage / tri séquentiel du stylo avec CSS et jQuery par SitePoint (@SitePoint) sur Codepen.

La démo ci-dessous anime les éléments filtrés séquentiellement à l'aide de l'animation rotative droite:

Voir le filtrage / tri séquentiel du stylo avec CSS et jQuery par SitePoint (@SitePoint) sur Codepen.

Conclusion

Ce même composant pourrait être construit sans jQuery et peut avoir de meilleures performances, mais la possibilité d'utiliser les méthodes Fadein () et Fadeout () de JQuery permet un code plus simple qui tire parti de certaines fonctionnalités disponibles pour jQuery.

Faites-moi savoir dans les commentaires si vous avez une solution différente ou un moyen d'améliorer le code.

Questions fréquemment posées (FAQ) sur la construction d'un composant de filtrage avec CSS Animations et jQuery

Comment puis-je ajouter plus de filtres au composant?

Ajouter plus de filtres au composant est assez simple. Vous devez définir le nouveau filtre dans votre CSS, puis ajouter les fonctionnalités correspondantes dans votre code jQuery. Par exemple, si vous souhaitez ajouter un filtre 'GrayScale', vous le définissez d'abord dans votre CSS comme ceci:

.Filter-Grayscale {
Filter: Graycale (100%);
}

Ensuite, dans votre code jQuery, vous ajouteriez un nouveau cas à votre instruction Switch pour gérer le nouveau Filtre:

commutateur (filtre) {
// Cas existants ...
case 'GraysCale':
$ contener.addclass ('filter-grayscale');
Break ;
// ...
}

N'oubliez pas d'ajouter un bouton ou un autre élément d'interface utilisateur qui permet à l'utilisateur d'activer le nouveau filtre.

Puis-je utiliser ce composant de filtrage avec d'autres bibliothèques JavaScript?

Oui, vous pouvez utiliser ce composant de filtrage avec d'autres bibliothèques JavaScript. JQuery est conçu pour être compatible avec d'autres bibliothèques. Il vous suffit de vous assurer qu'il n'y a pas de conflits entre les différentes bibliothèques. S'il y a des conflits, vous pouvez utiliser la méthode Noconflict () de JQuery pour les éviter. Cette méthode libère le maintien de l'identifiant `= raccourci, qui permet à d'autres bibliothèques de l'utiliser. Vous pouvez ensuite utiliser le nom complet de JQuery pour appeler ses méthodes.

Comment puis-je animer la transition entre les filtres?

L'animation de la transition entre les filtres peut être réalisée en utilisant les transitions CSS. Vous devez ajouter une propriété de transition à l'élément que vous souhaitez animer. Cette propriété spécifie la propriété CSS à la transition, la durée de la transition, la fonction de synchronisation et le retard avant le début de la transition. Par exemple, si vous souhaitez animer la transition de la propriété du filtre sur 1 seconde, vous ajouteriez le CSS suivant:

.Container {
Transition: filtre 1s;
}

Ensuite, lorsque vous modifiez le filtre à l'aide de jQuery, la transition sera animée.

Puis-je utiliser ce composant de filtrage sur plusieurs éléments sur le même page?

Oui, vous pouvez utiliser ce composant de filtrage sur plusieurs éléments sur la même page. Il vous suffit de vous assurer que chaque élément a un ID ou une classe unique que vous pouvez utiliser pour le sélectionner avec jQuery. Then, you can apply the filtering component to each element individually.

How can I make the filters responsive?

Making the filters responsive involves adjusting the CSS and jQuery code based on the size of the fenêtre. Vous pouvez utiliser les requêtes multimédias CSS pour appliquer différents styles pour différentes tailles de fenêtre. Dans votre code jQuery, vous pouvez utiliser la méthode $ (fenêtre) .resize () pour exécuter le code lorsque la fenêtre est redimensionnée. Vous pouvez ensuite ajuster les filtres en fonction de la nouvelle taille de la fenêtre.

Puis-je utiliser des animations CSS sans jQuery?

Oui, vous pouvez utiliser des animations CSS sans jQuery. Les animations CSS sont une caractéristique de CSS et ne nécessitent aucun JavaScript. Cependant, jQuery peut faciliter la gestion et le contrôle des animations, surtout si vous avez des animations complexes ou si vous souhaitez animer des éléments en réponse aux actions des utilisateurs.

Comment puis-je ajouter un filtre personnalisé?

L'ajout d'un filtre personnalisé consiste à définir une nouvelle classe CSS avec l'effet de filtre souhaité, puis à ajouter les fonctionnalités correspondantes dans votre code jQuery. Le processus est similaire à l'ajout de filtres, comme décrit dans la réponse à la question 1.

Puis-je utiliser ce composant de filtrage avec un contenu dynamique?

Oui, vous pouvez utiliser ce composant de filtrage avec un contenu dynamique. Il vous suffit de vous assurer que le composant de filtrage est appliqué au contenu une fois le chargement. Vous pouvez le faire en appelant le composant de filtrage dans la fonction de rappel de votre demande AJAX ou dans la fonction $ (document) .ready () si vous chargez le contenu lorsque la page se charge.

Comment puis-je optimiser Les performances du composant de filtrage?

L'optimisation des performances du composant de filtrage peut impliquer plusieurs stratégies. Une stratégie consiste à minimiser le nombre de manipulations DOM. Chaque fois que vous ajoutez ou supprimez une classe avec jQuery, cela fait recalculer le navigateur, ce qui peut être coûteux. Pour minimiser cela, vous pouvez regrouper vos modifications et les faire tous en même temps. Une autre stratégie consiste à utiliser les transitions CSS au lieu d'animations jQuery, car les transitions CSS sont généralement plus performantes.

Puis-je utiliser ce composant de filtrage avec une base de données backend?

Oui, vous pouvez utiliser ce filtrage Composant avec une base de données backend. Vous devez faire une demande AJAX au serveur pour récupérer les données de la base de données, puis utiliser jQuery pour appliquer le composant de filtrage aux données. Cela vous permettrait de filtrer les données en fonction des critères stockés dans la base de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!