使用CSS動畫和jQuery構建過濾組件-css教學-PHP中文網

鑰匙要點

這是關聯的樣式：

.filter-grayscale {

>我可以將此過濾組件與其他JavaScript庫使用？

>如何通過使用CSS過渡來使過濾器之間的過渡動畫？您需要將過渡屬性添加到要動畫的元素中。此屬性指定了CSS屬性為過渡，過渡的持續時間，正時函數以及過渡開始之前的延遲。例如，如果要在1秒內對濾波器屬性的過渡進行動畫化，則將添加以下CSS：

如何添加自定義過濾器？ 🎜>添加自定義過濾器涉及定義具有所需過濾器效果的新CSS類，然後在jQuery代碼中添加相應的功能。該過程類似於添加更多的過濾器，如問題1的答案中所述

>我可以將此過濾組件與動態內容一起使用嗎？您只需要確保將過濾組件應用於內容後。您可以通過在AJAX請求的回調函數或$（document）.ready（）函數中調用過濾組件來執行此操作。過濾組件的性能？

>我可以使用後端數據庫使用此過濾組件嗎？

首頁

web前端

css教學

使用CSS動畫和jQuery構建過濾組件

尊渡假赌尊渡假赌尊渡假赌

Feb 22, 2025 am 10:19 AM

使用CSS動畫和jQuery構建過濾組件

幾個月前，我寫了一篇有關Mixitup的文章，這是一個流行的jQuery插件，用於過濾和分類。在今天的文章中，我將向您展示如何使用jQuery和CSS動畫構建自己的簡單可過濾組件。

毫無進一步的ADO，讓我們開始！

鑰匙要點

>教程演示瞭如何使用jQuery和CSS動畫創建可過濾組件，從使用過濾器按鈕和要過濾的元素設置HTML結構開始，將其分組為類別。
> CSS設置涉及將“活動”類分配給與活動過濾器類別相對應的過濾器按鈕，使用FlexBox為目標元素創建佈局，並定義兩個不同的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>

登入後複製

首先，我定義了過濾按鈕和要過濾的元素（我們稱它們為目標元素）。接下來，我將目標元素分為三個類別（藍色，綠色和紅色），我給了他們數據類別屬性。此屬性的值確定每個元素屬於的類別。

設置CSS
>每次過濾器類別處於活動狀態時，其相應的過濾器按鈕都會接收活動類。默認情況下，帶有data-filter =“ all”屬性的按鈕獲取此類。

這是關聯的樣式：

>此外，我將使用Flexbox為目標元素創建佈局。 >

使用CSS動畫和jQuery構建過濾組件

請參閱下面的相關樣式：

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

登入後複製

從所有按鈕中刪除活動類，僅分配給選定的按鈕。

檢索和評估按鈕數據濾波器屬性的值。 >

>
>您可能更熟悉此語法：

這些聲明具有不同的含義：

在第一種情況下，只有在所有目標元素被隱藏後才執行回調。您可以通過訪問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（旋轉動畫）的分類/過濾組件。

>現在您了解了組件的工作原理，我將向您展示如何創建其不同的變化。

>動畫元素依次

>到目前為止，您可能已經註意到所有元素同時出現。現在，我將修改代碼以順序顯示：

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

登入後複製

上面的代碼看起來與上一個代碼相似，但存在一些明顯的區別：>

> 接下來，我使用finish（）方法在特定情況下停止為所選元素運行的動畫。要了解其用法，這裡有一個方案：單擊“過濾器”按鈕，然後，在所有元素出現之前，再次單擊該按鈕。您會注意到所有元素都消失了。同樣，在刪除了此方法的兩個實例之後，再次運行此測試。在這種情況下，您會發現元素會收到一些不希望的效果。有時正確調用此方法可能很棘手。在此示例中，我必須進行一些試驗，直到找到應該放置它的位置。

>請參閱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過渡通常更具性能。