CSSアニメーションとjQueryを使用したフィルタリングコンポーネントの構築-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSアニメーションとjQueryを使用したフィルタリングコンポーネントの構築

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

Feb 22, 2025 am 10:19 AM

CSSアニメーションとjQueryを使用したフィルタリングコンポーネントの構築

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

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

キーテイクアウト

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

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

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

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

<span><span><span><div> class<span>="cta filter"</span>>
  <span><span><span><a> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show All<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Green Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Blue Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Red Boxes<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><div> class<span>="boxes"</span>>
  <span><span><span><a> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></a></span>Box1<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></a></span>Box2<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></a></span>Box3<span><span></span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></span></span></span></span></span></span>
</div></span>></span></span>

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

データフィルター属性もフィルターボタンに割り当てました。この属性の値は、目的のフィルターカテゴリを指定します。たとえば、data-filter = "red"属性/値のボタンには、赤いカテゴリに属する要素のみが表示されます。一方、data-filter = "all"を備えたボタンには、すべての要素が表示されます。

css
フィルターカテゴリがアクティブになるたびに、対応するフィルターボタンがアクティブクラスを受信します。デフォルトでは、data-filter = "all"属性を備えたボタンがこのクラスを取得します。

ここに関連するスタイルがあります：

さらに、FlexBoxを使用してターゲット要素のレイアウトを作成します。

CSSアニメーションとjQueryを使用したフィルタリングコンポーネントの構築

以下の関連スタイルを参照してください：

<span><span><span><div> class<span>="cta filter"</span>>
  <span><span><span><a> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show All<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Green Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Blue Boxes<span><span></span>></span>
</span>  <span><span><span><a> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Red Boxes<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><div> class<span>="boxes"</span>>
  <span><span><span><a> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></a></span>Box1<span><span></span>></span>
</span>  <span><span><span><a> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></a></span>Box2<span><span></span>></span>
</span>  <span><span><span><a> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></a></span>Box3<span><span></span>></span>
</span>
 <span><!-- other anchor/boxes here ... -->
</span>
<span><span><span></span></span></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の構築を開始できます。

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アニメーションを使用してそれらを示します。

この時点で、1つのことを明確にすることが重要です。上記のコードのFadeout（）メソッドの構文に注意してください。次のように見えます：
これらの宣言には、意味が異なります：

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

<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（）メソッドのみを使用して要素を明らかにしてください。

要素をアニメーション化して順番に
今まで、すべての要素が同時に表示されることに気付いたかもしれません。次に、コードを変更して順番に表示します
```
<div> class="cta filter">
 <a> class="all active" data-filter="all" href="#" role="button"></a>Show All>
 <a> class="green" data-filter="green" href="#" role="button"></a>Show Green Boxes>
 <a> class="blue" data-filter="blue" href="#" role="button"></a>Show Blue Boxes>
 <a> class="red" data-filter="red" href="#" role="button"></a>Show Red Boxes>

</div>>

<div> class="boxes">
 <a> class="red" data-category="red" href="#"></a>Box1>
 <a> class="green" data-category="green" href="#"></a>Box2>
 <a> class="blue" data-category="blue" href="#"></a>Box3>

 


</div>>
```
上記のコードは前のコードに似ていますが、いくつかの明確な違いがあります。
- 次に、finish（）メソッドを使用して、特定のケースで選択した要素の現在実行されているアニメーションを停止します。その使用法を理解するために、シナリオを次に示します。フィルターボタンをクリックしてから、すべての要素が表示される前に、ボタンをもう一度クリックします。すべての要素が消えることに気付くでしょう。同様に、このメソッドの2つのインスタンスを削除した後、このテストを再度実行します。そのような場合、要素がいくつかの望ましくない効果を受け取ることがわかります。この方法を適切に呼び出すのは難しい場合があります。この例では、どこに置くべきかを見つけるまで少し実験しなければなりませんでした。
- 以下のデモは、ズームインアニメーションを使用して、フィルタリングされた要素を順番にアニメーション化します。
以下のデモは、回転右アニメーションを使用して、フィルタリングされた要素を順番にアニメーション化します。
CodepenのSitePoint（@SitePoint）によるCSSおよびjQueryを使用したペンシーケンシャルフィルタリング/ソートを参照してください。
結論

この同じコンポーネントはjQueryなしで構築でき、パフォーマンスが向上する可能性がありますが、jQueryのfadein（）およびfadeout（）メソッドを使用することで、jqueryが利用できる特定の機能を利用するより簡単なコードが可能になります。
別の解決策がある場合、またはコードを改善する方法がある場合は、コメントで教えてください。
CSSアニメーション＆jQueryを使用したフィルタリングコンポーネントの構築に関するよくある質問（FAQ）
コンポーネントにさらにフィルターを追加するにはどうすればよいですか？

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

.filter-grayscale {
フィルター：グレイスケール（100％）;
}

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

スイッチ（フィルター） {既存のケース...
ケース「グレイスケール」：
$ container.addclass（ 'filter-grayscale'）;
// ...
> }

ユーザーが新しいフィルターをアクティブにすることを可能にするボタンまたは他のUI要素を追加することを忘れないでください。

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

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

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

フィルター間の遷移をアニメーション化することは、CSS遷移を使用して達成できます。アニメーション化する要素に遷移プロパティを追加する必要があります。このプロパティは、遷移へのCSSプロパティ、遷移期間、タイミング関数、および遷移が開始される前の遅延を指定します。たとえば、フィルタープロパティの遷移を1秒以上アニメーション化する場合、次のCSSを追加します。 >次に、jQueryを使用してフィルターを変更すると、遷移がアニメーション化されます。
はい、同じページの複数の要素でこのフィルタリングコンポーネントを使用できます。各要素に、jQueryで選択するために使用できる一意のIDまたはクラスがあることを確認する必要があります。次に、各要素に個別にフィルタリングコンポーネントを適用できます。

フィルターを応答するにはどうすればよいですか？

フィルターの応答性を伴うには、CSSとjQueryコードの調整が含まれます。ビューポート。 CSSメディアクエリを使用して、さまざまなビューポートサイズにさまざまなスタイルを適用できます。 jQueryコードでは、$（window）.resize（）メソッドを使用して、ウィンドウのサイズ変更時にコードを実行できます。その後、ウィンドウの新しいサイズに基づいてフィルターを調整できます。
jQueryなしでCSSアニメーションを使用できますか？ CSSアニメーションはCSSの機能であり、JavaScriptは必要ありません。ただし、JQUERYは、特に複雑なアニメーションがある場合、またはユーザーアクションに応じて要素をアニメーション化する場合、アニメーションの管理と制御を容易にすることができます。 🎜>カスタムフィルターを追加するには、目的のフィルター効果で新しいCSSクラスを定義し、jQueryコードに対応する機能を追加することが含まれます。このプロセスは、質問1の回答で説明されているように、さらにフィルターを追加することに似ています。
このフィルタリングコンポーネントを動的なコンテンツで使用できますか？

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

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