使用CSS动画和jQuery构建过滤组件

几个月前，我写了一篇有关Mixitup的文章，这是一个流行的jQuery插件，用于过滤和分类。在今天的文章中，我将向您展示如何使用jQuery和CSS动画构建自己的简单可过滤组件。

毫无进一步的ADO，让我们开始！

>

钥匙要点

• >教程演示了如何使用jQuery和CSS动画创建可过滤组件，从使用过滤器按钮和要过滤的元素设置HTML结构开始，将其分组为类别。
>。
• > CSS设置涉及将“活动”类分配给与活动过滤器类别相对应的过滤器按钮，使用FlexBox为目标元素创建布局，并定义两个不同的CSS键帧动画以揭示元素。
jQuery设置涉及编写代码以处理过滤器按钮上的单击事件，从所有按钮中删除“活动”类，并仅将其分配给选定的类别，检索和评估按钮数据滤波器属性的值，并使用使用按钮。 CSS动画以根据所选过滤器显示或隐藏元素。
• >教程还显示了如何使用每个（）方法通过目标元素进行迭代以及设置每个元素的数量应等待。 >
• 设置html

作为第一步，我将向您展示组件的HTML结构。考虑以下标记：

请注意，我已经设置了一些基本的标记。这是对此的解释：

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

首先，我定义了过滤按钮和要过滤的元素（我们称它们为目标元素）。 接下来，我将目标元素分为三个类别（蓝色，绿色和红色），我给了他们数据类别属性。此属性的值确定每个元素属于的类别。

>

>我还将数据滤波器属性分配给了过滤器按钮。此属性的值指定所需的过滤器类别。例如，带有data-filter =“ red”属性/值的按钮仅显示属于红色类别的元素。另一方面，带有data-filter =“ all”的按钮将显示所有元素。
>您已经概述了所需的HTML，我们可以继续探索CSS。
• 设置CSS
• >每次过滤器类别处于活动状态时，其相应的过滤器按钮都会接收活动类。默认情况下，带有data-filter =“ all”属性的按钮获取此类。
>

这是关联的样式：

>此外，我将使用Flexbox为目标元素创建布局。>

请参阅下面的相关样式：

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

>最后，我定义了两个不同的CSS密钥帧动画，我以后将使用这些动画来揭示这些元素：>

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

有标记和CSS，我们可以开始构建JavaScript/jQuery。

设置jQuery

请查看下面的代码，之后我将解释发生的事情：>

每次单击过滤器按钮时，都会发生以下情况：

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

从所有按钮中删除活动类，仅分配给选定的按钮。

检索和评估按钮数据滤波器属性的值。>

如果数据过滤器的值全部，则所有元素都应出现。为此，我首先隐藏它们，然后，当所有元素被隐藏时，我都会使用旋转权利或缩放CSS动画展示它们。
如果不是全部，则应出现相应类别的目标元素。为此，我首先隐藏了所有元素，然后，当所有元素被隐藏时，我仅使用旋转权利或Zoom-In CSS动画显示关联类别的元素。
• >
在这一点上，澄清一件事很重要。请注意上述代码中fadeout（）方法的语法。看起来如下：
• >您可能更熟悉此语法：

这些声明具有不同的含义：

在第一种情况下，只有在所有目标元素被隐藏后才执行回调。您可以通过访问jQuery文档的Promise（）部分来了解有关此方法的更多信息。

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

> 在第二种情况下，回调多次触发。具体来说，每当元素被隐藏时都会执行。

>

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

下面的演示使用Zoom-In动画：

>请参阅codepen上的sitepoint（@sitepoint）的CSS和jQuery（带有Zoom Animation）的Pen/extrive组件。

• >此演示使用旋转右动画：
• >请参阅codepen上的sitepoint（@sitepoint）的CSS和jQuery（旋转动画）的分类/过滤组件。
> 当然，上述CSS动画是可选的。如果您不喜欢这些特定的动画，请随时仅使用jQuery的fadein（）方法删除它们并揭示元素。

>现在您了解了组件的工作原理，我将向您展示如何创建其不同的变化。

>动画元素依次

>到目前为止，您可能已经注意到所有元素同时出现。现在，我将修改代码以顺序显示：

>

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

上面的代码看起来与上一个代码相似，但存在一些明显的区别：>

首先，我使用每个（）方法通过目标元素进行迭代。另外，随着它的循环，我将获得当前元素的索引（基于零），并将其乘以一个数字（例如200）。派生的数字作为参数传递给延迟方法。该数字表示每个元素应等待之前等待的毫秒数量。
• > 接下来，我使用finish（）方法在特定情况下停止为所选元素运行的动画。要了解其用法，这里有一个方案：单击“过滤器”按钮，然后，在所有元素出现之前，再次单击该按钮。您会注意到所有元素都消失了。同样，在删除了此方法的两个实例之后，再次运行此测试。在这种情况下，您会发现元素会收到一些不希望的效果。有时正确调用此方法可能很棘手。在此示例中，我必须进行一些试验，直到找到应该放置它的位置。
>
下面的演示使用Zoom-In Animation依次将过滤的元素动画：

>请参阅codepen上的Sitepoint（@sitepoint）的Pen顺序过滤/排序组件。

>

下面的演示使用旋转右右动画依次依次地进行过滤的元素：

>请参阅codepen上的sitepoint（@sitepoint）的css和jQuery的笔顺序过滤/排序。

结论

>可以在没有jQuery的情况下构建同一组件，并且可能具有更好的性能，但是使用JQuery的Fadein（）和fadeout（）方法的能力允许更简单的代码，以利用JQuery可用的某些功能。

>在评论中让我知道您是否有不同的解决方案或改进代码的方法。

>经常询问的问题（常见问题解答）有关使用CSS动画和jQuery

构建过滤组件

>如何在组件中添加更多过滤器？您需要在CSS中定义新过滤器，然后在jQuery代码中添加相应的功能。例如，如果要添加一个“灰度”过滤器，则首先在这样的CSS中定义它：

.filter-grayscale {

filter：grayscale：grayscale（100％）;

>然后，在您的jQuery代码中，您将在开关语句中添加一个新案例以处理新的过滤器：

switch（filter） {

//现有情况...
案例'grayscale'：
$ container.addclass（'filter-grayscale'）;
break; break; // ...
}

请记住添加一个按钮或其他UI元素，该元素允许用户激活新的过滤器。

>我可以将此过滤组件与其他JavaScript库使用？

是的，您可以将此过滤组件与其他JavaScript库一起使用。 jQuery设计为与其他库兼容。您只需要确保不同库之间没有冲突。如果有冲突，您可以使用jQuery的Noconflict（）方法来避免它们。此方法将释放“ =快捷方式标识符”上的保留，该标识符允许其他库使用它。然后，您可以使用jQuery的全名调用其方法。

>如何通过使用CSS过渡来使过滤器之间的过渡动​​画？您需要将过渡属性添加到要动画的元素中。此属性指定了CSS属性为过渡，过渡的持续时间，正时函数以及过渡开始之前的延迟。例如，如果要在1秒内对滤波器属性的过渡进行动画化，则将添加以下CSS：

.container {
过渡：filter 1s;
}

然后，当您使用jQuery更改过滤器时，过渡将被动画。

>我可以在同一页面上的多个元素上使用此过滤组件吗？是的，您可以在同一页面上多个元素上使用此过滤组件。您只需要确保每个元素都有一个独特的ID或类，可以使用jQuery选择它。然后，您可以将过滤组件分别应用于每个元素。

>

>如何使过滤器响应？

>使过滤器响应响应涉及根据基于CSS和jQuery代码的大小调整过滤器的大小。视口。您可以使用CSS媒体查询将不同的样式应用于不同的视口尺寸。在jQuery代码中，您可以使用$（window）.resize（）方法在调整窗口时执行代码。然后，您可以根据窗口的新大小调整过滤器。

>我可以使用无jQuery的CSS动画吗？ CSS动画是CSS的功能，不需要任何JavaScript。但是，jQuery可以使管理和控制动画更容易，尤其是当您拥有复杂的动画或要对用户操作响应元素进行动画元素时。

如何添加自定义过滤器？ 🎜>添加自定义过滤器涉及定义具有所需过滤器效果的新CSS类，然后在jQuery代码中添加相应的功能。该过程类似于添加更多的过滤器，如问题1的答案中所述

>我可以将此过滤组件与动态内容一起使用吗？您只需要确保将过滤组件应用于内容后。您可以通过在AJAX请求的回调函数或$（document）.ready（）函数中调用过滤组件来执行此操作。过滤组件的性能？

优化过滤组件的性能可能涉及多种策略。一种策略是最大程度地减少DOM操纵的数量。每次您添加或删除使用jQuery的课程时，都会导致浏览器重新计算布局，这可能很昂贵。为了最小化这一点，您可以将更改分组在一起，并立即进行所有更改。另一个策略是使用CSS过渡而不是jQuery动画，因为CSS过渡通常更具性能。

>

>我可以使用后端数据库使用此过滤组件吗？

是的，您可以使用此过滤器具有后端数据库的组件。您需要向服务器提出AJAX请求，以从数据库中检索数据，然后使用jQuery将过滤组件应用于数据。这将允许您根据数据库中存储的标准过滤数据。

>

以上是使用CSS动画和jQuery构建过滤组件的详细内容。更多信息请关注PHP中文网其他相关文章！