Opt in with default none

A bare boundary cross-fades on every transition. Switch the default off.

React docsreact.dev
If default is "none" then all other triggers are turned off unless explicitly listed.
View Transition ClassRead docs ↗

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

A refresh should stay still

Add a card, then refresh the data.

Bare boundariesBad

<ViewTransition key={id}>
default="none"Good

default="none" enter="scale-in"
{cards.map(card => (
  <ViewTransition key={card.id} default="none" enter="scale-in" exit="scale-out">
    <StatCard card={card} />
  </ViewTransition>
))}

Why it matters, pros and cons

Why it matters

Every Transition reaches every boundary on screen: revalidations, deferred updates, Suspense reveals. default="none" makes each boundary list what it animates.

Pros

  • Background refreshes stay still.
  • Page slides and Suspense reveals stop competing.
  • Each boundary states its triggers.

Cons

  • It also turns off update: keyed items stop gliding.
  • A named pair without share stops morphing.
  • Keyed items want update: leave them bare.