數(shù)ヶ月前、私はフィルタリングとソートのための人気のあるjQueryプラグインであるMixitupについての記事を書きました。本日の記事では、jQueryとCSSアニメーションで獨自のシンプルなフィルター可能なコンポーネントを構(gòu)築する方法を紹介します。

それ以上のadoなしで、始めましょう！

キーテイクアウト

チュートリアルでは、jQueryおよびCSSアニメーションを使用してフィルター可能なコンポーネントを作成する方法を示しています。フィルターボタンとフィルタリングする要素を使用してHTML構(gòu)造をセットアップし、カテゴリにグループ化します。

CSSセットアップでは、「アクティブ」クラスをアクティブフィルターカテゴリに対応するフィルターボタンに割り當(dāng)て、FlexBoxを使用してターゲット要素のレイアウトを作成し、2つの異なるCSSキーフレームアニメーションを定義して要素を表示します。
• jQueryセットアップでは、フィルターボタンのクリックイベントを処理するコードを作成し、すべてのボタンから「アクティブ」クラスを削除し、選択したボタンにのみ割り當(dāng)て、ボタンのデータフィルター屬性の値を取得および評価し、使用し、使用したり、評価したりします。選択したフィルターに基づいて要素を表示または非表示にするCSSアニメーション
• チュートリアルでは、各（）メソッドを使用してターゲット要素と遅延メソッドを使用して、各要素の量を設(shè)定して、各要素がフェードインする前に待機する必要がある場合、要素を順番にアニメーション化する方法も示しています。 >
• html
のセットアップ
• 最初のステップとして、コンポーネントのHTML構(gòu)造を紹介します。次のマークアップを検討してください：

かなり基本的なマークアップをセットアップしたことに注意してください。説明は次のとおりです

最初に、フィルターボタンとフィルタリングしたい要素を定義しました（ターゲット要素と呼びます）

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

次に、ターゲット要素を3つのカテゴリ（青、緑、赤）にグループ化し、データカテゴリ屬性を與えました。この屬性の値は、各要素が屬するカテゴリを決定します。

データフィルター屬性もフィルターボタンに割り當(dāng)てました。この屬性の値は、目的のフィルターカテゴリを指定します。たとえば、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>

最後に、後で使用する2つの異なる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の構(gòu)築を開始できます。

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>

アクティブクラスはすべてのボタンから削除され、選択したボタンにのみ割り當(dāng)てられます。

ボタンのデータフィルター屬性の値が取得され、評価されます。

データフィルターの値がすべてである場合、すべての要素が表示されるはずです。そうするために、私は最初にそれらを非表示にし、次に、すべての要素が非表示になったら、回転右またはズームインCSSアニメーションを使用してそれらを示します。

値がすべてではない場合、対応するカテゴリのターゲット要素が表示されます。そうするために、最初にすべての要素を非表示にしてから、それらのすべてが非表示になったら、回転右またはズームインCSSアニメーションを使用して関連するカテゴリの要素のみを表示します。
• この時點で、1つのことを明確にすることが重要です。上記のコードのFadeout（）メソッドの構(gòu)文に注意してください。次のように見えます：
この構(gòu)文にはおそらく精通しているでしょう：
• これらの宣言には、意味が異なります：

最初のケースでは、コールバックはすべてのターゲット要素が非表示になった後にのみ実行されます。 jqueryのドキュメントのPromise（）セクションにアクセスして、このアプローチの詳細情報をご覧ください。 2番目のケースでは、コールバックが複數(shù)回起動されます。具體的には、要素が非表示になるたびに実行されます

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

以下のデモでは、ズームインアニメーションを使用しています：

CODEPENのSitePoint（@SitePoint）のCSSとjQuery（Zoom Animation）を使用したソート/フィルタリングコンポーネントを參照してください。 このデモでは、回転右アニメーションを使用しています：

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

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>

  上記のコードは前のコードに似ていますが、いくつかの明確な違いがあります。

  最初に、ターゲット要素を介して各（）メソッドを使用して使用します。さらに、ループする際に、現(xiàn)在の要素のインデックス（ゼロベース）を取得し、數(shù)字（たとえば200）を掛けます。派生數(shù)は、遅延方法への引數(shù)として渡されます。この數(shù)値は、各要素がフェードインする前に待つ必要があるミリ秒の量を示しています。
  • 次に、finish（）メソッドを使用して、特定のケースで選択した要素の現(xiàn)在実行されているアニメーションを停止します。その使用法を理解するために、シナリオを次に示します。フィルターボタンをクリックしてから、すべての要素が表示される前に、ボタンをもう一度クリックします。すべての要素が消えることに気付くでしょう。同様に、このメソッドの2つのインスタンスを削除した後、このテストを再度実行します。そのような場合、要素がいくつかの望ましくない効果を受け取ることがわかります。この方法を適切に呼び出すのは難しい場合があります。この例では、どこに置くべきかを見つけるまで少し実験しなければなりませんでした。
  • 以下のデモは、ズームインアニメーションを使用して、フィルタリングされた要素を順番にアニメーション化します。
  CodepenのSitePoint（@SitePoint）によるCSS＆JQueryを使用したペンシーケンシャルフィルタリング/ソートコンポーネントを參照してください。
  以下のデモは、回転右アニメーションを使用して、フィルタリングされた要素を順番にアニメーション化します。

  CodepenのSitePoint（@SitePoint）によるCSSおよびjQueryを使用したペンシーケンシャルフィルタリング/ソートを參照してください。

  結(jié)論
  この同じコンポーネントはjQueryなしで構(gòu)築でき、パフォーマンスが向上する可能性がありますが、jQueryのfadein（）およびfadeout（）メソッドを使用することで、jqueryが利用できる特定の機能を利用するより簡単なコードが可能になります。

  別の解決策がある場合、またはコードを改善する方法がある場合は、コメントで教えてください。

  CSSアニメーション＆jQueryを使用したフィルタリングコンポーネントの構(gòu)築に関するよくある質(zhì)問（FAQ）

  コンポーネントにさらにフィルターを追加するにはどうすればよいですか？

  コンポーネントにフィルターを追加するのは非常に簡単です。 CSSの新しいフィルターを定義し、jQueryコードに対応する機能を追加する必要があります。たとえば、「グレイスケール」フィルターを追加する場合、最初にこのようなCSSで定義します：

  .filter-grayscale {

  フィルター：グレイスケール（100％）;

  }

  次に、jQueryコードでは、新しいフィルターを処理するためにスイッチステートメントに新しいケースを追加します：

  スイッチ（フィルター） {既存のケース...

  ケース「グレイスケール」：

  $ container.addclass（ 'filter-grayscale'）;
  // ...
  > }
  
  ユーザーが新しいフィルターをアクティブにすることを可能にするボタンまたは他のUI要素を追加することを忘れないでください。

  このフィルタリングコンポーネントを他のJavaScriptライブラリと使用できますか？

  はい、このフィルタリングコンポーネントを他のJavaScriptライブラリで使用できます。 jQueryは、他のライブラリと互換性があるように設(shè)計されています。異なるライブラリ間に競合がないことを確認(rèn)する必要があります。競合がある場合は、jQueryのnoconflict（）メソッドを使用してそれらを回避できます。このメソッドは、 `=ショートカット識別子のホールドを解放します。これにより、他のライブラリが使用できます。その後、jqueryのフルネームを使用してメソッドを呼び出すことができます。

  フィルター間の遷移をアニメーション化するにはどうすればよいですか？

  フィルター間の遷移をアニメーション化することは、CSS遷移を使用して達成できます。アニメーション化する要素に遷移プロパティを追加する必要があります。このプロパティは、遷移へのCSSプロパティ、遷移期間、タイミング関數(shù)、および遷移が開始される前の遅延を指定します。たとえば、フィルタープロパティの遷移を1秒以上アニメーション化する場合、次のCSSを追加します。 >次に、jQueryを使用してフィルターを変更すると、遷移がアニメーション化されます。
  はい、同じページの複數(shù)の要素でこのフィルタリングコンポーネントを使用できます。各要素に、jQueryで選択するために使用できる一意のIDまたはクラスがあることを確認(rèn)する必要があります。次に、各要素に個別にフィルタリングコンポーネントを適用できます。
  
  フィルターを応答するにはどうすればよいですか？
  
  フィルターの応答性を伴うには、CSSとjQueryコードの調(diào)整が含まれます。ビューポート。 CSSメディアクエリを使用して、さまざまなビューポートサイズにさまざまなスタイルを適用できます。 jQueryコードでは、$（window）.resize（）メソッドを使用して、ウィンドウのサイズ変更時にコードを?qū)g行できます。その後、ウィンドウの新しいサイズに基づいてフィルターを調(diào)整できます。
  

  jQueryなしでCSSアニメーションを使用できますか？ CSSアニメーションはCSSの機能であり、JavaScriptは必要ありません。ただし、JQUERYは、特に複雑なアニメーションがある場合、またはユーザーアクションに応じて要素をアニメーション化する場合、アニメーションの管理と制御を容易にすることができます。 ??>カスタムフィルターを追加するには、目的のフィルター効果で新しいCSSクラスを定義し、jQueryコードに対応する機能を追加することが含まれます。このプロセスは、質(zhì)問1の回答で説明されているように、さらにフィルターを追加することに似ています。

  このフィルタリングコンポーネントを動的なコンテンツで使用できますか？

  はい、動的コンテンツを備えたこのフィルタリングコンポーネントを使用できます。フィルタリングコンポーネントがロードされた後にコンテンツに適用されることを確認(rèn)する必要があります。これは、Ajax要求のコールバック関數(shù)または$（document）.ready（）関數(shù)ページがロードされたときにコンテンツを読み込んでいる場合、$（document）.ready（）関數(shù)を呼び出すことでこれを行うことができます。フィルタリングコンポーネントのパフォーマンスはありますか？

  フィルタリングコンポーネントのパフォーマンスを最適化するには、いくつかの戦略が含まれます。 1つの戦略は、DOM操作の數(shù)を最小限に抑えることです。 jQueryを使用してクラスを追加または削除するたびに、ブラウザがレイアウトを再計算しますが、これは高価になる可能性があります。これを最小限に抑えるために、変更をグループ化して一度にすべて作成できます。別の戦略は、jQueryアニメーションの代わりにCSSトランジションを使用することです。CSS遷移は一般的にパフォーマンスが高いためです。バックエンドデータベースを備えたコンポーネント。データベースからデータを取得するためにサーバーにAJAX要求を行い、jQueryを使用してデータにフィルタリングコンポーネントを適用する必要があります。これにより、データベースに保存されている基準(zhǔn)に基づいてデータをフィルタリングできます。

以上がCSSアニメーションとjQueryを使用したフィルタリングコンポーネントの構(gòu)築の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。