Put it before any DOM node

A wrapper div above <ViewTransition> turns enter and exit off.

React docsreact.dev
<ViewTransition> only activates exit/enter if it is placed before any DOM nodes.
PitfallRead docs ↗

From vercel-react-view-transitions, SKILL.md.

Same notice, one wrapper

Add notices, then dismiss one.

div, then boundaryBad
<div><ViewTransition>…
Boundary firstGood
<ViewTransition><div>…
// Works: the boundary is the first thing inserted
{notices.map(n => (
  <ViewTransition key={n.id} enter="scale-in" exit="scale-out">
    <div className="notice">{n.text}</div>
  </ViewTransition>
))}

// Broken: the div is inserted first, so enter and exit never fire
{notices.map(n => (
  <div key={n.id}>
    <ViewTransition enter="scale-in" exit="scale-out">…</ViewTransition>
  </div>
))}

Why it matters, pros and cons

Why it matters

Enter and exit fire on the topmost boundary of the subtree being inserted or removed. Put a host element above it and the element is what gets inserted.

Pros

  • Enter and exit fire as written.
  • Keyed siblings still glide as updates.
  • Same rule in lists: nothing between map and the boundary.

Cons

  • Nothing warns you; the animation just stops.
  • Styling hooks move to the inner element.
  • A boundary inside a new parent boundary stays silent too.