Reordering a list without it jumping
- Build
- Test
- Deploy
CaveatEvery element you want animated needs a view-transition-name, and each one has to be unique at the moment of the transition. Two matching names and the transition is skipped outright, with an error only in the console.
FallbackWhere the API is missing the callback still runs and the DOM still updates — you lose the animation and nothing else. That makes it safe to ship without a feature check around the update itself.
// the DOM change goes inside the callback
document.startViewTransition?.(() => reorder())
?? reorder();
/* unique, or the transition is skipped */
#build { view-transition-name: build; }
#deploy { view-transition-name: deploy; }Published
Questions
Why is my view transition skipped with no animation at all?
Two rendered elements shared a view-transition-name. Every name has to be unique at the moment of the transition, and a duplicate cancels the whole thing outright — with an error in the console and nothing on screen to tell you.
How do I name items in a list I did not write by hand?
Derive the name from something already unique to the row — its id — rather than a shared class, and hand styling to a view transition class instead. Repeating components are where duplicates come from.
Do I need a feature check around startViewTransition()?
Around the animation, not around the update. Where the API is missing the callback still runs and the DOM still changes; you lose the animation and nothing else, so the update itself is safe to call unguarded.