GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

スワイプ削除リストUI 9選 — ページネーションまで

· Godrich · 9種 · 6分で読める

リスト・テーブルUI素のJSSCSSクリックローディングダッシュボード

スワイプ削除とは、リストの行を横に押すと裏に隠れていた削除ボタンが現れる動きのことで、アプリで見たあの操作をウェブでもそのまま使いたい人は多いです。この記事では、そのスワイプ削除を含むリストのインタラクションを9個、実際に動くコードでまとめました。

スワイプ削除リビール01 swipe-actions-delete-reveal スワイプ複数アクション02 swipe-actions-multi-action-stack プルリフレッシュ03 pull-to-refresh-elastic-spinner ドラッグハンドルで並び替え04 sortable-table-drag-handle-reorder クリックソートヘッダー05 sortable-table-header-click-sort 固定ヘッダー + 固定列06 sticky-columns-header-freeze スケルトンローディング行07 skeleton-list-shimmer-rows 一括選択ツールバー08 bulk-select-checkbox-toolbar 数字ページネーション09 pagination-numbered-ellipsis

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9個は人気順ではなく、リストがたどる順番で並べました。まず1行だけを扱う手の動き(01・02のスワイプ、03の引っ張って更新)、次にリスト全体を扱う操作(04・05の並び替え、06の css テーブルヘッダー固定)、最後に項目が増えすぎたときに必要なもの(07の読み込み中表示・08の一括選択・09のページ分割)という順です。行をタップして開く側はアコーディオンリスト UI 9選に、2枚の写真をつまみで見比べる画面はビフォーアフター スライダー UI 9選にあります。

01スワイプ削除リビール

何が動くか

行を左にスワイプすると赤い削除ボタンが裏から現れ、半分以上スワイプすると行ごと自動で消えます。

スワイプ削除リビール
新しいタブで開く

01 · スワイプ削除リビール — 計測 累積面積 6.517% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

pointerdown/move/uptransform:translateX임계값 스냅

コードで見る所

ボタンは常にDOM上にある本物の<button>なので、Tabキーで移動してDeleteキーを押しても同じように削除できます。

// pointermove で --dx を直接書き換え、離した瞬間に2つのしきい値で判定する
content.addEventListener('pointermove', function (e) {
  dx = Math.min(0, Math.max(-170, e.clientX - startX));
  content.style.transform = 'translateX(' + dx + 'px)';
});
function end() {
  if (dx < -140) { removeRow(); }                  // 削除のしきい値を超えた
  else content.style.transform = dx < -44 ? 'translateX(-88px)' : '';
}

02スワイプ複数アクション

何が動くか

さらにスワイプするほど、お気に入り・アーカイブ・削除ボタンが順番に横から現れて並びます。

スワイプ複数アクション
新しいタブで開く

02 · スワイプ複数アクション — 計測 累積面積 12.767% · 動いたフレーム 17/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

stagger revealtransform 순차 지연touch-action: pan-y

コードで見る所

3つとも本物のボタンなので、行にTabキーでフォーカスを移すだけで、キーボード操作でも同じボタンが現れます。

.action {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s, transform .22s;
}
// ホバーだけでなくキーボードフォーカスが行に入ったときも同じ3つのボタンが現れる
.row:focus-within .action { opacity: 1; transform: translateY(0); }
.action--fav     { animation-delay: 0ms; }
.action--archive { animation-delay: 80ms; }
.action--del     { animation-delay: 160ms; }

03プルリフレッシュ

何が動くか

リストの一番上から下に引っ張るとゴムのような抵抗で伸び、手を離すとスピナーが回って更新されます。

プルリフレッシュ
新しいタブで開く

03 · プルリフレッシュ — 計測 累積面積 14.518% · 動いたフレーム 17/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

touch 이동 거리elastic ease-outspinner rotate keyframes

コードで見る所

表示されている更新ボタンを押しても同じアニメーションが起きるので、指で引っ張る操作ができない人にも使えます。

function end() {
  if (dy > 44) refresh();            // 半分以上引っ張った
  else body.style.transform = '';    // それ以外は元の位置へ戻る
}
function refresh() {
  body.style.transform = 'translateY(56px)';
  setTimeout(function () { body.style.transform = ''; }, 900);
}

04ドラッグハンドルで並び替え

何が動くか

行の左にある六点ハンドルをつかんで上下に動かすと、通過する行が場所を譲って順番が入れ替わります。

ドラッグハンドルで並び替え
新しいタブで開く

04 · ドラッグハンドルで並び替え — 計測 累積面積 18.702% · 動いたフレーム 17/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

pointerdown 드래그형제 요소 reflowdrop index 계산

コードで見る所

ポインターを使わなくても、ハンドルにフォーカスを合わせて矢印キーを押すだけで同じように並び替えられます。

handle.addEventListener('keydown', function (e) {
  var sib = e.key === 'ArrowDown' ? row.nextElementSibling
          : e.key === 'ArrowUp'   ? row.previousElementSibling : null;
  if (!sib) return;
  e.preventDefault();
  e.key === 'ArrowDown' ? list.insertBefore(sib, row) : list.insertBefore(row, sib);
  handle.focus({ preventScroll: true });   // iframe内の親ページが強制スクロールされないようにする
});

05クリックソートヘッダー

何が動くか

列見出しをクリックすると矢印が反転し、その列を基準に昇順・降順が交互に並び替わります。

クリックソートヘッダー
新しいタブで開く

05 · クリックソートヘッダー — 計測 累積面積 3.665% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

aria-sort 속성click 토글화살표 rotate transform

コードで見る所

並び替えの状態はaria-sortにも渡されるので、矢印の向きが見えない人にも同じ情報がスクリーンリーダー経由で伝わります。

btn.addEventListener('click', function () {
  var dir = btn.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
  ths.forEach(function (b) { b.setAttribute('aria-sort', 'none'); });
  btn.setAttribute('aria-sort', dir);
  rows.sort(function (a, b) {
    var cmp = a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0;
    return dir === 'ascending' ? cmp : -cmp;
  }).forEach(function (r) { tbody.appendChild(r); });
});

06固定ヘッダー + 固定列

何が動くか

表を縦横にスクロールしても、一番上のヘッダー行と一番左の列は画面に固定されたままついてきます。

固定ヘッダー + 固定列
新しいタブで開く

06 · 固定ヘッダー + 固定列 — 計測 累積面積 11.599% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

position:sticky top+leftz-index 겹침 순서border 겹선 보정

コードで見る所

position: stickyにtopとleftを両方与え、その2つが重なる一つのセルだけz-indexをもう一段上げれば実現できます。

// ヘッダー行 — 縦にスクロールしても上に固定される
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
// 一番左の列 — 横にスクロールしても左に固定される
tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
}
// 両方が重なる角のセルだけさらに上のレイヤーに置く
.corner { position: sticky; top: 0; left: 0; z-index: 3; }

07スケルトンローディング行

何が動くか

データが来る前、グレーのバー行が左右に光を流し、コンテンツが入る場所を先に見せます。

スケルトンローディング行
新しいタブで開く

07 · スケルトンローディング行 — 計測 累積面積 4.918% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

shimmer gradient sweeparia-busybackground-position keyframes

コードで見る所

バーの地色と光る帯の明るさの差を大きく取るほど、スクリーンショットやgifでも光が流れているのがはっきり見えます。

.bar {
  background: linear-gradient(90deg, #d8d8de 25%, rgba(255, 255, 255, .95) 50%, #d8d8de 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

08一括選択ツールバー

何が動くか

行のチェックボックスを一つでも選ぶと、画面下から削除・移動などの一括操作ツールバーがスライドで現れます。

一括選択ツールバー
新しいタブで開く

08 · 一括選択ツールバー — 計測 累積面積 6.635% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

indeterminate checkboxtranslateY(120%)selectall 동기화

コードで見る所

一部の行だけ選ばれているときは、全選択チェックボックスがindeterminate状態に変わり、「全部ではない」ことを見た目で伝えます。

function sync() {
  var n = items.filter(function (c) { return c.checked; }).length;
  all.checked = n === items.length;
  all.indeterminate = n > 0 && n < items.length;    // 一部だけ選ばれている状態を区別する
  list.classList.toggle('has-selection', n > 0);    // ツールバーをスライドで見せるトリガー
}

09数字ページネーション

何が動くか

ページ番号ボタンが並び、ページ数が増えると中央が三点リーダーに折りたたまれ、現在のページだけが強調されます。

数字ページネーション
新しいタブで開く

09 · 数字ページネーション — 計測 累積面積 4.884% · 動いたフレーム 10/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

current page stateellipsis collapse 계산prev/next disabled

コードで見る所

このデモは全8ページなので、最初・最後・現在のページの隣だけが番号のまま残ります。

function pages(total, current) {
  var out = [];
  for (var p = 1; p <= total; p++) {
    // 最初・最後のページか、現在のページの隣なら番号を残す
    if (p === 1 || p === total || Math.abs(p - current) <= 1) {
      out.push(p);
    } else if (out[out.length - 1] !== '...') {
      out.push('...');           // 連続する飛ばし区間は点ひとつにまとめる
    }
  }
  return out;
}

リストのスワイプ・並び替え、どこで壊れるか

プルリフレッシュ、どこで壊れるか？

01・02番はどちらもドラッグが始まった瞬間にsetPointerCaptureを呼んでいます。この一行を忘れると(うっかり抜けやすい部分です)、指がボタンの外へ少しでも出た瞬間にpointermoveが途切れ、理由もわからずスワイプが途中で止まってしまいます。もう一つの落とし穴は08番のツールバーを作る過程で実際に踏んだものです — チェックが一つもないときは画面外に隠れているはずの要素なのに、overflow: hiddenで囲む前のコードでこの480×300のデモを320px幅で描画し直したところ、document.documentElement.scrollHeightがビューポートより大きくなり、見た目は変わらないのにページだけが伸びていました。今このzipに入っているのは、リスト全体をoverflow: hiddenで囲んで直したあとのコードです。ドラッグで項目を並べ替える感覚を画面全体に広げた構成はポートフォリオ ギャラリー UI 9選で扱いました。この9個のファイルをまとめたzipの合言葉はkjj4ftraで、解凍するとvanilla・reactの両方が同じ構成で並んでいるので見比べられます。

アクセシビリティ — 9個がreduced-motionで残すもの

押さえた点

「動きを減らす」設定が有効な人に対して、01〜06・08番はtransition: noneで切り替えの時間だけをなくし、スワイプ・並び替え・固定という結果自体はそのまま起きますが瞬時に切り替わります。07番(スケルトン)だけは扱いが違い、光が流れるアニメーションを完全には止めず、代わりに周期を3.2秒まで伸ばして、読み込み中という合図は残しつつちらつきを大きく減らします。09番(ページネーション)はもともと色が変わる切り替えしかないので、reduced-motion環境ではその切り替えもtransition: noneで瞬時になります。9個ともフォーカス表示が残っているので、マウスなしでキーボードだけで最後まで操作できます。

次に見る所

ほかのリスト・表のテーマは実用UIカテゴリーにまとまっていて、このサイトが何を扱っているかはサイト紹介にあります。position: stickyがどのスクロールコンテナを基準にするかはMDNのリファレンスに、01・02番が使うsetPointerCaptureはMDNのPointer events文書にまとまっています。

FAQ — よくある質問

スワイプ削除や css ページネーションはライブラリなしで本当に作れますか?

はい。ここでの01・02番はpointerdown・pointermove・pointerupの3つのイベントとtransform: translateX()だけで作られていて、別のジェスチャーライブラリは使っていません。

なぜtop・leftではなくtransformで動かすのですか?

top・left・heightの値を変えると、ブラウザが毎フレームレイアウトを計算し直すことになり、ドラッグやスワイプの最中にカクつきやすくなります。transformとopacityだけを動かせば、レイアウト計算なしで合成レイヤーだけが更新されるので指の動きに滑らかについてきます。

vanillaとreactのコードは違いますか?

動き自体は同じです。vanillaのデモはギャラリー用にis-demoクラスで絶え間なく繰り返し再生しますが、ReactコンポーネントはuseState・useRefを使って実際のpointer・clickイベントにだけ反応します。列をドラッグで広げ、セルを選んでコピーする表の兄弟にあたるのがテーブル UI デザイン 9選です。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。