react/viewtransition

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ViewTransition onEnter and onExit must return cleanup function

ViewTransition event handlers onEnter and onExit should always return a cleanup function that cancels the animation. This allows the browser to cancel the animation when the View Transition is interrupted.

ViewTransition onEnter cleanup function example

Example of properly cleaning up a View Transition onEnter animation: const anim = instance.new.animate(SLIDE_IN, {duration: 500, easing: 'ease-out'}); return () => anim.cancel();

ViewTransition types parameter for conditional animations

The onEnter and onExit event handlers receive a second parameter 'types' which is an array. You can check if a specific type string is included in this array to conditionally apply different animations based on how the transition was triggered.

ViewTransition duration based on transition type example

Example using the types parameter to conditionally set animation duration: const duration = types.includes('fast') ? 150 : 2000; const anim = instance.new.animate(SLIDE_IN, {duration: duration, easing: 'ease-out'}); return () => anim.cancel();

addTransitionType marks transition with custom type

Use addTransitionType to mark a transition with a custom type string, such as 'fast'. This type will be available in the types parameter of ViewTransition onEnter and onExit handlers. Call addTransitionType within a startTransition.

ViewTransition placement requirement for activation

A <ViewTransition> component only activates if it is placed before any DOM node. It must be a parent of other DOM nodes, not a sibling. If placed as a sibling to DOM nodes, the transition will not activate.

ViewTransition placement incorrect example

Incorrect placement where ViewTransition is a child of a div: function Component() { return (<div><ViewTransition>Hi</ViewTransition></div>); }

ViewTransition placement correct example

Correct placement where ViewTransition is the root and wraps other elements: function Component() { return (<ViewTransition><div>Hi</div></ViewTransition>); }

ViewTransition duplicate name error condition

An error is thrown when two <ViewTransition> components with the same 'name' prop are mounted at the same time in the application. The error message is: 'There are two <ViewTransition name=%s> components with the same name mounted at the same time.'

ViewTransition duplicate name example problem

Problem example of duplicate names: function Item() { return <ViewTransition name="item">...</ViewTransition>; } When this Item component is rendered multiple times in a list, all instances have the same name, causing an error.

ViewTransition unique name fix with id

To fix duplicate name errors, make the name unique by including an identifier, such as an item id: function Item({id}) { return <ViewTransition name={`item-${id}`}>...</ViewTransition>; }

Navigation API requirement for View Transition routers

When building View Transition enabled routers, if a startTransition is started from a legacy popstate event (such as back-navigation), React will skip animations to ensure scroll and form restoration works correctly. To enable animations for back button, upgrade your router to use the Navigation API.

useLayoutEffect requirement for Navigation in View Transitions

In View Transition enabled routers, if a Navigation is blocked on React, the router must unblock the Navigation in useLayoutEffect, not useEffect. Using useEffect would lead to a deadlock because React waits for pending Navigation to finish before starting the animation.

Give your agent this brain