社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 > web前端 > css教學 > 使用CSS動畫和jQuery構建過濾組件

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

尊渡假赌尊渡假赌尊渡假赌
發布： 2025-02-22 10:19:08
原創
131 人瀏覽過

使用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為目標元素創建佈局。 >

使用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>
登入後複製

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

檢索和評估按鈕數據濾波器屬性的值。 >
    如果數據過濾器的值全部，則所有元素都應出現。為此，我首先隱藏它們，然後，當所有元素被隱藏時，我都會使用旋轉權利或縮放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中文網其他相關文章！

上一篇：通過@Extend在SASS中的繼承的好處 下一篇：視差燒傷：使用SVG將照片從2D轉換為3D
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2813
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2938
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2456
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
2380
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
2437
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板