Chapter 73: addTransitionType

Core Idea

addTransitionType(type) tags a transition with a named type string, letting a ViewTransition component's animation logic distinguish why an update is happening (a forward navigation vs. a back navigation vs. a deletion) and animate each case differently.

Key Concepts

• Called inside a transition: addTransitionType is invoked within the same startTransition-wrapped update it's meant to annotate, tagging that specific transition instance with a semantic label.
• Consumed by ViewTransition: a <ViewTransition> in the resulting tree can read the active transition type(s) to choose different animation behavior — e.g. sliding left for "forward navigation" vs. sliding right for "back navigation," rather than using one generic animation for every state change.
• Multiple types can apply: more than one addTransitionType call can tag a single transition, letting animation logic respond to a combination of conditions rather than a single flat category.
• Purely a coordination signal — it doesn't perform any animation itself; it exists to give ViewTransition-based animation code enough context to differentiate transitions that would otherwise look identical from React's perspective.

Key Takeaways

1. Use this specifically to disambiguate multiple distinct transitions that should animate differently but are otherwise both "just a state update."
2. It only has meaning in combination with ViewTransition (Ch 71) — reading/reacting to the type is the animation layer's job, not this function's.
3. Call it inside the same transition it's meant to describe, not separately or afterward.

Connects To

• Ch 71 (ViewTransition): the component that actually consumes the transition type to vary its animation.
• Ch 65 (useTransition): the transition mechanism this function tags.