view-transition-name: match-element

concepts

1. view-transition-name: match-element

   view-transition-name: match-element lets the browser auto-assign stable transition names per element. No more hand-managed name spaces.

2. SPA List

   The canonical SPA case: a list with adds, deletes, swaps. Side-by-side with a legacy no-name list so you can see which mutations morph cleanly and which cross-fade.

3. Pairing lab

   Click a tile to expand. Toggle between match-element, explicit per-element names, and no name; the lab times each transition and surfaces a matrix of which patterns each strategy can handle.

4. MPA & cross-document tree

   Answer four questions about your app; the tree picks match-element vs explicit names vs view-transition-class, and tells you when not to reach for match-element — including the MPA case.

why it shipped

'match-element' generates a unique id based on the element's identity and renames the same for this element. This is used in Single Page App cases where the element is being moved around and the desire is to animate it with a view transition Note this is split off from https://chromestatus.com/feature/6575974796492800 which contains additional discussions

references

• ChromeStatus entry
• Spec