demo · v140

List Reorder

A vote leaderboard using view-transition-class so one CSS rule animates every reorder. Upvote one item and watch the rows swap.

    .item { view-transition-name: var(--n); view-transition-class: row; }
::view-transition-group(*.row) { animation-duration: 500ms; }
list.startViewTransition(() => rerender());

    see also