MixItUpを利用してHTMLの要素をアニメーションで動かしながら入れ替える

はじめに

数値を棒グラフで表現し、数値の上下に合わせげグラフを更新しつつソートしたいと思い検討したところ、うまい方法があったので紹介します。
何を言ってるのかというと↓のようなことです。

実際のサイト：https://sogoryoku.com

実装方法

上記のようなアニメーションによるソートをはじめから作ると大変なのでいいライブラリがないかと探したところ、MixItUpというライブラリを発見しました。

これを利用すると、要素をアニメーションを使ってソートすることができます。
詳しい利用方法は本家のページに譲るとして、MixItUpを利用して上の動画のようなグラフをどのように実装したかを次で解説します。

MixItUpを使った動的なグラフ実装

MixItUpは各要素が持つdata要素の数値を参照して要素を並び替えます。そして、このdata要素は自由にラベルをつけることができます。
例えば下記のようにすることができます。

<div class="container">
 <div data-narabikae="10">
 <div data-narabikae="1">
 <div data-narabikae="5">
</div>

上記のように、「narabikae」の部分は任意の文字列にすることができます。

あとは

var containerEl = document.querySelector('.container');
var mixer = mixitup(containerEl);
mixer.sort('narabikae:asc');

のようにすると「data-narabikae」の数値を参照した上で自動的に要素の入れ替えをおこなってくれます。

dataの値を動的に変更することはできない

上記のルールさえわかれば、あとはdataの数値を更新していけば何度でも並び替えが行えそうなものなのですが、どうやらdataの数値を更新してもMixItUpには認識されないようです。

どういうことかというと、一度ソートを行った後にdataの値を別の値に変更して再度ソートしようとしても意図した通りの順番に並び替えられないということです。

これを解決する方法は何通りかあるのかもしれませんが、1番楽なのはdata要素を増やしてしまうということです。
つまり、2回めのソートの時にはdata-narabikae-2という要素を新たに追加してしまい、data-narabikae-2に対して新しい数値を設定した上で、data-narabikae-2によってソートすれば良いということです。

上記を利用して作ったサイトについては下記の動画でまとめています。

最後に

gokeでは上記のようなプログラムを駆使して新しいサービスを制作しています。気になることなどがあればコメントまたはTwitterでご連絡ください。