addTransitionType

startTransition(() => {
  addTransitionType('my-transition-type');
  setState(newState);
});

• Reference
  • addTransitionType
• Usage
  • Adding the cause of a transition
  • Customize animations using browser view transition types
  • Customize animations using View Transition Class
  • Customize animations using ViewTransition events

Reference

addTransitionType

Parameters

• type: The type of transition to add. This can be any string.

Returns

addTransitionType does not return anything.

Caveats

• If multiple transitions are combined, all Transition Types are collected. You can also add more than one type to a Transition.
• Transition Types are reset after each commit. This means a <Suspense> fallback will associate the types after a startTransition, but revealing the content does not.

Usage

Adding the cause of a transition

Call addTransitionType inside of startTransition to indicate the cause of a transition:

import { startTransition, addTransitionType } from 'react';

function Submit({action) {
  function handleClick() {
    startTransition(() => {
      addTransitionType('submit-click');
      action();
    });
  }

  return <button onClick={handleClick}>Click me</button>;
}

When you call addTransitionType inside the scope of startTransition, React will associate submit-click as one of the causes for the Transition.

Currently, Transition Types can be used to customize different animations based on what caused the Transition. You have three different ways to choose from for how to use them: