MixItUpを使ってアニメーションのあるページ内フィルターを作る

超高性能フィルターが作れるMixItUpを実装してみましょう。

MixItUpはページ内ソートができるJavaScriptのプラグインです。jQueryなどに依存していないプレーンなJavaScriptなので、あらゆる場面で使えると思います。

ウェブを検索するとと「MixItUp」と「MixItUp 3」というのが見つかりますが、「MixItUp」はjQueryのライブラリで古いもの、「MixItUp 3」というのがプレーンなJavaScriptで作られた新しいものになります。

この記事ではJavaScriptで作られた新しい「MixItUp 3」を紹介しています。

CONTENTS

サンプル
HTML
- class=”mixitup-button”
- class=”mixitup-list”
CSS
JavaScript
アニメーションを変更する
動きがおかしいとき
さいごに

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

サンプル

サンプルを見てみましょう。

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”

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の動作とコンフリクトするので動きが不自然になったりします。