Always pair enter and exit

Without an exit, the old view vanishes while the new one animates in.

Next.js docsnextjs.org
The asymmetry is deliberate. Old content should leave quickly so it does not compete for attention. New content should arrive more gently so the user has time to register it.
Animate loading statesRead docs ↗

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

Switching forms

Press Switch form a few times.

enter onlyBad
enter="slide-up"
enter + exitGood
enter="slide-up" exit="slide-down"
<ViewTransition key={form} enter="slide-up" exit="slide-down" default="none">
  {form === 'sign-in' ? <SignIn /> : <SignUp />}
</ViewTransition>

::view-transition-old(.slide-down) {
  animation:
    var(--duration-exit) ease-out both fade reverse,
    var(--duration-exit) ease-out both slide-y reverse;
}
::view-transition-new(.slide-up) {
  animation:
    var(--duration-enter) ease-in var(--duration-exit) both fade,
    var(--duration-move) ease-in both slide-y;
}

Why it matters, pros and cons

Why it matters

Exit animates the old snapshot, enter the new one. Leave one out and that half cuts: the old form blinks away before the new one fades in.

Pros

  • The old view hands off instead of blinking out.
  • Short exit, longer enter: the eye lands on the new view.
  • They can differ: fade in, slide out.

Cons

  • Two classes to keep in sync per boundary.
  • Next to a shared morph, slide the exit; don't fade it.
  • Type maps need default: 'none' on both.