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 usingView Transition Class
  • Customize animations usingViewTransition events

Reference

addTransitionType

Parameters

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

Returns

startTransition 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 astartTransition, but revealing the content does not.

Usage

Adding the cause of a transition

CalladdTransitionType inside ofstartTransition to indicate the cause of a transition:

import{startTransition,addTransitionType}from'react';

functionSubmit({action){
functionhandleClick(){
startTransition(()=>{
addTransitionType('submit-click');
action();
});
}

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

When you calladdTransitionType inside the scope ofstartTransition, React will associatesubmit-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:

• Customize animations using browser view transition types
• Customize animations usingView Transition Class
• Customize animations usingViewTransition events

In the future, we plan to support more use cases for using the cause of a transition.

Customize animations using browser view transition types

When aViewTransition activates from a transition, React adds all the Transition Types as browserview transition types to the element.

This allows you to customize different animations based on CSS scopes:

functionComponent(){
return(
<ViewTransition>
<div>Hello</div>
</ViewTransition>
);
}

startTransition(()=>{
addTransitionType('my-transition-type');
setShow(true);
});

:root:active-view-transition-type(my-transition-type){
  &::view-transition-...(...){
    ...
}
}

Customize animations usingView Transition Class

You can customize animations for an activatedViewTransition based on type by passing an object to the View Transition Class:

functionComponent(){
return(
<ViewTransitionenter={{
'my-transition-type':'my-transition-class',
}}>
<div>Hello</div>
</ViewTransition>
);
}

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

If multiple types match, then they’re joined together. If no types match then the special “default” entry is used instead. If any type has the value “none” then that wins and the ViewTransition is disabled (not assigned a name).

These can be combined with enter/exit/update/layout/share props to match based on kind of trigger and Transition Type.

<ViewTransitionenter={{
'navigation-back':'enter-right',
'navigation-forward':'enter-left',
}}
exit={{
'navigation-back':'exit-right',
'navigation-forward':'exit-left',
}}>

Customize animations usingViewTransition events

You can imperatively customize animations for an activatedViewTransition based on type using View Transition events:

<ViewTransitiononUpdate={(inst,types)=>{
if(types.includes('navigation-back')){
...
}elseif(types.includes('navigation-forward')){
...
}else{
...
}
}}>

This allows you to pick different imperative Animations based on the cause.