如果數(shù)據(jù)過濾器的值全部，則所有元素都應(yīng)出現(xiàn)。為此，我首先隱藏它們，然后，當(dāng)所有元素被隱藏時(shí)，我都會使用旋轉(zhuǎn)權(quán)利或縮放CSS動畫展示它們。
如果不是全部，則應(yīng)出現(xiàn)相應(yīng)類別的目標(biāo)元素。為此，我首先隱藏了所有元素，然后，當(dāng)所有元素被隱藏時(shí)，我僅使用旋轉(zhuǎn)權(quán)利或Zoom-In CSS動畫顯示關(guān)聯(lián)類別的元素。
• >
在這一點(diǎn)上，澄清一件事很重要。請注意上述代碼中fadeout（）方法的語法。看起來如下：
• >您可能更熟悉此語法：

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

• >此演示使用旋轉(zhuǎn)右動畫：
• >請參閱codepen上的sitepoint（@sitepoint）的CSS和jQuery（旋轉(zhuǎn)動畫）的分類/過濾組件。
> 當(dāng)然，上述CSS動畫是可選的。如果您不喜歡這些特定的動畫，請隨時(shí)僅使用jQuery的fadein（）方法刪除它們并揭示元素。

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

>動畫元素依次

>到目前為止，您可能已經(jīng)注意到所有元素同時(shí)出現(xiàn)。現(xiàn)在，我將修改代碼以順序顯示：

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

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

首先，我使用每個(gè)（）方法通過目標(biāo)元素進(jìn)行迭代。另外，隨著它的循環(huán)，我將獲得當(dāng)前元素的索引（基于零），并將其乘以一個(gè)數(shù)字（例如200）。派生的數(shù)字作為參數(shù)傳遞給延遲方法。該數(shù)字表示每個(gè)元素應(yīng)等待之前等待的毫秒數(shù)量。
• > 接下來，我使用finish（）方法在特定情況下停止為所選元素運(yùn)行的動畫。要了解其用法，這里有一個(gè)方案：單擊“過濾器”按鈕，然后，在所有元素出現(xiàn)之前，再次單擊該按鈕。您會注意到所有元素都消失了。同樣，在刪除了此方法的兩個(gè)實(shí)例之后，再次運(yùn)行此測試。在這種情況下，您會發(fā)現(xiàn)元素會收到一些不希望的效果。有時(shí)正確調(diào)用此方法可能很棘手。在此示例中，我必須進(jìn)行一些試驗(yàn)，直到找到應(yīng)該放置它的位置。
>
下面的演示使用Zoom-In Animation依次將過濾的元素動畫：

>請參閱codepen上的Sitepoint（@sitepoint）的Pen順序過濾/排序組件。

下面的演示使用旋轉(zhuǎn)右右動畫依次依次地進(jìn)行過濾的元素：

>請參閱codepen上的sitepoint（@sitepoint）的css和jQuery的筆順序過濾/排序。

結(jié)論

>可以在沒有jQuery的情況下構(gòu)建同一組件，并且可能具有更好的性能，但是使用JQuery的Fadein（）和fadeout（）方法的能力允許更簡單的代碼，以利用JQuery可用的某些功能。

>經(jīng)常詢問的問題（常見問題解答）有關(guān)使用CSS動畫和jQuery

>如何在組件中添加更多過濾器？您需要在CSS中定義新過濾器，然后在jQuery代碼中添加相應(yīng)的功能。例如，如果要添加一個(gè)“灰度”過濾器，則首先在這樣的CSS中定義它：

.filter-grayscale {

>然后，在您的jQuery代碼中，您將在開關(guān)語句中添加一個(gè)新案例以處理新的過濾器：

//現(xiàn)有情況...
案例'grayscale'：
$ container.addclass（'filter-grayscale'）;
break; break; // ...
}

請記住添加一個(gè)按鈕或其他UI元素，該元素允許用戶激活新的過濾器。

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

是的，您可以將此過濾組件與其他JavaScript庫一起使用。 jQuery設(shè)計(jì)為與其他庫兼容。您只需要確保不同庫之間沒有沖突。如果有沖突，您可以使用jQuery的Noconflict（）方法來避免它們。此方法將釋放“ =快捷方式標(biāo)識符”上的保留，該標(biāo)識符允許其他庫使用它。然后，您可以使用jQuery的全名調(diào)用其方法。

>如何通過使用CSS過渡來使過濾器之間的過渡動??畫？您需要將過渡屬性添加到要?jiǎng)赢嫷脑刂?。此屬性指定了CSS屬性為過渡，過渡的持續(xù)時(shí)間，正時(shí)函數(shù)以及過渡開始之前的延遲。例如，如果要在1秒內(nèi)對濾波器屬性的過渡進(jìn)行動畫化，則將添加以下CSS：

.container {
過渡：filter 1s;
}

然后，當(dāng)您使用jQuery更改過濾器時(shí)，過渡將被動畫。

>我可以在同一頁面上的多個(gè)元素上使用此過濾組件嗎？是的，您可以在同一頁面上多個(gè)元素上使用此過濾組件。您只需要確保每個(gè)元素都有一個(gè)獨(dú)特的ID或類，可以使用jQuery選擇它。然后，您可以將過濾組件分別應(yīng)用于每個(gè)元素。

>如何使過濾器響應(yīng)？