Skip to content

[Fiber] Support only View Transitions v2 #31996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sebmarkbage merged 1 commit into from
Jan 8, 2025
Merged

[Fiber] Support only View Transitions v2 #31996

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 20 additions & 11 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1187,19 +1187,28 @@ export function startViewTransition(
rootContainer.nodeType === DOCUMENT_NODE
? rootContainer
: rootContainer.ownerDocument;
// $FlowFixMe[prop-missing]
if (typeof ownerDocument.startViewTransition !== 'function') {
try {
// $FlowFixMe[prop-missing]
const transition = ownerDocument.startViewTransition({
update() {
mutationCallback();
// TODO: Wait for fonts.
afterMutationCallback();
},
types: null, // TODO: Provide types.
});
transition.ready.then(layoutCallback, layoutCallback);
transition.finished.then(passiveCallback);
return true;
} catch (x) {
// We use the error as feature detection.
// The only thing that should throw is if startViewTransition is missing
// or if it doesn't accept the object form. Other errors are async.
// I.e. it's before the View Transitions v2 spec. We only support View
// Transitions v2 otherwise we fallback to not animating to ensure that
// we're not animating with the wrong animation mapped.
Copy link
Member

@rickhanlonii rickhanlonii Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it worth caching this? Like after the first time we know it's not available?

Copy link
Collaborator Author

@sebmarkbage sebmarkbage Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah. It'll soon be no browser that hits this and it's not worth optimizing for older ones.

return false;
}
// $FlowFixMe[incompatible-use]
const transition = ownerDocument.startViewTransition(() => {
mutationCallback();
// TODO: Wait for fonts.
afterMutationCallback();
});
transition.ready.then(layoutCallback, layoutCallback);
transition.finished.then(passiveCallback);
return true;
}

export function clearContainer(container: Container): void {
Expand Down
Loading