お久しぶりです。ナガタです。
７月初旬からの更新となり２ヶ月あまり途絶えていてすみませんでした！
以下の様な状況でございました。

---

• さくらハウスオープン
  • 鹿児島にスタートアップやテック系文化を応援するイベントスペースをオープンしました。
  • ASCII.jpさんに記事にして頂きました。→ASCII.jp：酒がうまい勉強会、最高！ 鹿児島さくらハウスがうらやましい
• 脱腸してた
  • 私ナガタが脱腸（ヘルニア）を患ってしまい、その他業務も含めバタバタしておりました。
  • ナガタ無事手術を終え経過も良好です。

更新ない日も毎日沢山の方に閲覧いただいていたようで嬉しいです。
というわけでこれからまた再開していければと思います。

簡単なのにいい感じのアニメーションで要素を入れ替えられる「MixItUp」

仕事復帰後早速の業務で触れた「MixItUp」をご紹介します。

MixItUp

まぁ見て触ってもらうのが早いと思うのでDemoを。

See the Pen JYGVjw by Tsukasa Nagata (@nt-uni) on CodePen.0

こんな感じです。
これがデフォルトの動きとなってます。

基本機能

• フィルタリング
  • 特定の要素のみ、また組み合わせでも可能です。該当するもののみを表示します。
• ソート
  • ランダムの他、昇順・降順可能で、細かく設定して複数要素（年齢の降順、名前の昇順）とかも可能です。

使い方

使い方はいたって簡単で、JacaScriptの外部ライブラリを使ったことがある方なら問題なく導入することができると思います。
こちらにチュートリアルがあるのですが、ざっくりとご説明します。

1. フィルタリング・ソート対象となる要素を設定する

<div id="Container">
    <div class="mix"></div>
    <div class="mix"></div>
    <div class="mix"></div>
    <div class="mix"></div>
</div>

上記のような感じで、必要なのは要素を囲む親要素のIDと要素自体にmixというクラスを指定します。
フィルタリングするカテゴリーもこちらのclassに指定します。

<div class="mix category-1"></div>

という感じですね。カテゴリーの数だけ作ります。
ここの名前はフィルタリングするための識別なのでご自身で決めてOKです。

ちなみにdivに対して付与していますが、liやpでも問題ありません。

2. フィルタリングコントロールをつくる

ボタンを押したらフィルタリングしたりソートしたりするわけですが、それを操作するためのボタンを定義します。

<div class="filter" data-filter="all">Show All</div>
<div class="filter" data-filter=".category-1">Category 1</div>
<div class="filter" data-filter=".category-2">Category 2</div>

こちらはクラスにfilterをいれ、data-filterに先ほど指定したカテゴリーをいれます。
ちなみにソートをするためにはdata-sort="category:asc"と設定します。（asc: 昇順／desc: 降順）

3. フィルタリングする要素を隠す

MixItUpが表示するため、初期表示は隠しておく必要があります。

.mix{
    display: none;
}

4. MixItUpを有効化する

※ jQueryを読み込ませてください

$(function(){
    $('#Container').mixItUp();
}

ここでは冒頭に出た親要素を指定します。直下にフィルタリングさせる要素がある必要があります。

以上です！
こんな簡単に先ほどのDemoのようなアニメーションがかかったものを実装することができます。

まとめ

いかがでしたか？
ほんとに簡単にできて見栄えもいいので、使う機会があれば是非お試しください。

ご紹介しておりませんが、アニメーションの種類やレイアウトなどのオプションもありますのでカスタマイズもできそうです！