FLIP で並び替え
「シャッフル」「数値順」で DOM の順序を入れ替えても、各行が元の位置から新しい位置へ滑らかに移動する。First / Last / Invert / Play の4手順を JS で実装。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- FLIP は「先に DOM を変えて最終位置を確定させ、差分だけ transform で巻き戻して再生」する。レイアウトを触るのは1回で済む
- アニメーションは transform と opacity だけに絞る。top/left や height を動かすと毎フレーム再レイアウトが走る
- 移動距離が長い行ほど時間を伸ばさず、同じ 350ms で揃える。速度差が「一斉に入れ替わった」感を作る
- 新しく入る行は fade+rise、消える行は fade だけ。出入りは移動より短く（200ms）して主役を移動に譲る
コード（コピーして使えます）
<div class="fl-wrap">
<div class="fl-bar">
<button class="fl-btn" id="flShuffle" type="button">シャッフル</button>
<button class="fl-btn" id="flSort" type="button">数値順</button>
</div>
<ul class="fl-list" id="flList">
<li class="fl-item" data-v="1284"><span class="fl-dot" style="--c:#2b50c7"></span><span class="fl-name">ミナト工房</span><span class="fl-val">1,284</span></li>
<li class="fl-item" data-v="962"><span class="fl-dot" style="--c:#c7692b"></span><span class="fl-name">Aoi Analytics</span><span class="fl-val">962</span></li>
<li class="fl-item" data-v="2410"><span class="fl-dot" style="--c:#2b8a5c"></span><span class="fl-name">はるか商店</span><span class="fl-val">2,410</span></li>
<li class="fl-item" data-v="533"><span class="fl-dot" style="--c:#8a2b6e"></span><span class="fl-name">ナギ設計</span><span class="fl-val">533</span></li>
<li class="fl-item" data-v="1790"><span class="fl-dot" style="--c:#6b655c"></span><span class="fl-name">ソラ物流</span><span class="fl-val">1,790</span></li>
</ul>
</div>