フィルタリングアニメーションを実装するならMixItUp

フィルタリングアニメーションを実装するならMixItUp

CSSから「display: none」を設定するだけだとフィルター機能としては少し物足りません。
一瞬にして切り替わるため、操作している側に並び替えた感がないためです。

そんな時に便利なのが「MixItUp」です。

フィルタリング時のアニメーション(消える、出てくる、移動する)を簡単に設定することができます。

ライセンス

ライセンス種類については明記されていません。

オープンソースであり、非営利目的であれば無料で使用することができます。
商用利用は買い切り型の商用ライセンスを取得する必要があります。

使用方法

ボタンのマークアップ、フィルタリング対象のコンテナの指定をするのが基本的な使用方法となります。

See the Pen MixItUp base by s-Kuma (@kumatechlab) on CodePen.

ボタンのマークアップ

上の例では「data-toggle」を設定しています。

「data-toggle」では複数ボタンによる絞り込みが可能です。
「data-filter」では単一ボタンによる絞り込みが可能です。

フィルタリング対象のコンテナ指定

上の例では「container」がフィルタリング対象のコンテナに該当しています。

文字列で指定することもElementで指定することもできます。

オプション

オプションは数多くあるため、よく使用されそうなものをピックアップして紹介します。

すべてのオプションは下記リンクを参考にしてください。

https://www.kunkalabs.com/mixitup/docs/configuration-object/

アニメーション

  • effets ・・・表示・非表示されるときのアニメーション効果を指定できます。(effectsIn、effectsOutで別々に設定することも可能です。)
  • duration・・・アニメーション効果時間を設定できます。(ms)
  • easing・・・アニメーション効果導線を指定できます。
  • queue・・・アニメーション中にボタンが押された場合、キューとして追加するか設定できます。
  • clampHeight・・・スクロールバーのちらつき防止を設定できます。

See the Pen MixItUp base by s-Kuma (@kumatechlab) on CodePen.

コールバック

  • onMixStart・・・フィルター開始時に呼び出されます。
  • onMixBusy・・・キューをfalseに設定している場合や最大の際に呼び出されます。
  • onMixEnd・・・フィルター終了時に呼び出されます。
  • onMixFail・・・フィルターが失敗した時に呼び出されます。
  • onMixClick・・・フィルターボタンがクリックされた際に呼び出されます。

See the Pen MixItUp animation by s-Kuma (@kumatechlab) on CodePen.

クラス名

  • block・・・アクティブになったコントロールのクラスを変更できます。(デフォルト mixitup)
  • elementFilter・・・アクティブになったコントロールのクラスを変更できます。(デフォルト control)
  • elementToggle・・・アクティブになったコントロールのクラスを変更できます。(デフォルト control)
  • modifierActive・・・アクティブになったコントロールのクラスを変更できます。(デフォルト active)
  • delineatorElement・・・アクティブになったコントロールのクラスを変更できます。(デフォルト -)
  • delineatorModifier・・・アクティブになったコントロールのクラスを変更できます。(デフォルト -)

See the Pen MixItUp animation by s-Kuma (@kumatechlab) on CodePen.

セレクター

  • target・・・並び替え対象のセレクターを指定できます。(文字列)

まとめ

各種設定ができることからフィルター設置の一覧表示などではUXの向上が見込まれます。
また、上記では紹介していませんが、複数のフィルターを設置することも可能です。

フィルターが使用できるからとすべての要素を表示するとページ自体が重くなってしまいます。カテゴリーなどで絞り込んだ後に使用するのが実用的ではないでしょうか。