超高性能フィルターが作れるMixItUpを実装してみましょう。
MixItUpはページ内ソートができるJavaScriptのプラグインです。jQueryなどに依存していないプレーンなJavaScriptなので、あらゆる場面で使えると思います。
ウェブを検索するとと「MixItUp」と「MixItUp 3」というのが見つかりますが、「MixItUp」はjQueryのライブラリで古いもの、「MixItUp 3」というのがプレーンなJavaScriptで作られた新しいものになります。
この記事ではJavaScriptで作られた新しい「MixItUp 3」を紹介しています。
サンプル
サンプルを見てみましょう。
See the Pen
MixItUp by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.
サンプルでは、上部のボタンをクリックすると下部にあるリストがアニメーションされてフィルタリングされます。
HTML
HTMLはこんな感じです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - MixItUp</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<div class="mixitup-button">
<button type="button" data-filter="all">ALL ITEM</button>
<button type="button" data-filter=".cat-a">A</button>
<button type="button" data-filter=".cat-b">B</button>
<button type="button" data-filter=".cat-c">C</button>
<button type="button" data-filter=".cat-d">D</button>
<button type="button" data-filter=".orange" class="orange">ORANGE</button>
<button type="button" data-filter=".blue" class="blue">BLUE</button>
<button type="button" data-filter=".red" class="red">RED</button>
</div>
<div class="mixitup-list">
<div class="mix cat-a orange"><span>A</span></div>
<div class="mix cat-b blue"><span>B</span></div>
<div class="mix cat-b cat-c orange"><span>B / C</span></div>
<div class="mix cat-a cat-d blue"><span>A / D</span></div>
<div class="mix cat-b cat-d blue"><span>B / D</span></div>
<div class="mix cat-a cat-b red"><span>A / B</span></div>
</div>
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
MixItUpはCDNでも提供されているので、CDNで読み込んでおくと何かと安心ですね。
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>
class=”mixitup-button”はフィルタリングするためのボタンを配しています。data-filter=”FOO”を入れることでボタンとして機能します。
class=”mixitup-list”
class=”mixitup-list”はフィルタリングされるリストを配しています。class=”mix”に、data-filter=”FOO”とマッチするclass名を入れておきます。
class="mix FOO"
例えばmixitup-listに「fruit red」と入れておき、mixitup-buttonで「fruit」「red」とそれぞれのボタンを作ることで、「フルーツのみ」や「赤色のみ」のフィルタリングが可能になります。
CSS
CSSはSCSSを使っています。
.mixitup-button {
display: flex;
gap: 1rem;
flex-wrap: wrap;
border-bottom: 1px solid #cccccc;
padding: 2rem;
button {
background: #eeeeee;
border: 1px solid #cccccc;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
&:hover {
border: 1px solid #000000;
}
}
}
.mixitup-list {
display: flex;
gap: 1rem;
flex-wrap: wrap;
padding: 2rem;
div {
margin: 0;
width: calc(100% / 3 - 0.75rem);
span {
display: block;
color: #ffffff;
font-weight: bold;
padding: 1rem;
}
}
}
.orange {
color: #ffffff;
background: #f0932b !important;
}
.blue {
color: #ffffff;
background: #4834d4 !important;
}
.red {
color: #ffffff;
background: #eb4d4b !important;
}
すべてのコードを載せていますが、トンマナに合わせて好きなようにデザインしてだいじょうぶです。
JavaScript
MixItUpを実行するためのコードを書きます。
var containerEl = document.querySelector(".mixitup-list");
var mixer = mixitup(containerEl);
これだけで基本的には動きます。
アニメーションを変更する
オリジナリティのあるアニメーションを実装するには、下記のようにします。
var containerEl = document.querySelector(".mixitup-list");
var mixer = mixitup(containerEl, {
animation: {
effects: "fade scale(0)",
easing: "cubic-bezier(1, 0, 0, 1)",
duration: 1000,
reverseOut: false,
clampHeight: false,
nudge: false,
},
});
CSSのcubic-bezierが使えるので、cubic-bezierをeasingに入れてdurationにアニメーションの時間を入れてみましょう。
また、細かなアニメーションについてはMixItUp | KunkaLabsの右上にあるAnimation Optionsにて設定することも可能です。
アニメーションを設定したら「Export config」をクリックすることでソースコードが表示できます。
動きがおかしいとき
トラブルとして実装後に動きがおかしくなることがあったりします。動きがおかしいなと思ったら、.mixitup-listの子要素にtransitionやtransformが設定されていないかを確認してください。transitionやtransformはMixItUpの動作とコンフリクトするので動きが不自然になったりします。
さいごに
MixItUpは、セグメント、ソート、ランダム、追加、削除、など数多くの機能を備えたプラグインです。
使う場面は少ないかもしれませんが、いざというときに使えるとかなりの時短になりますので、ぜひ、覚えておくと良いですよー！
