startViewTransition

Runs update inside a browser view transition, so the change animates from the old screen to the new one, and resolves when the animation has finished.

Runs update inside a browser view transition, so the change animates from the old screen to the new one, and resolves when the animation has finished. Without the API (older browsers, or a server) the update runs at once and the promise resolves. Motion preferences are handled by the browser and by the CSS of the page (prefers-reduced-motion).

The update runs synchronously inside the transition's callback, flushed with flushSync, so the new DOM is what the browser captures. An error thrown by the update rejects the promise.

Import#

import { startViewTransition } from "@shadow-js/web";

Signature#

function startViewTransition(
  update: () => void,
  options?: ViewTransitionOptions,
): Promise<void>

Parameters#

Name	Description
`update`	Changes the state the page shows. Called once, synchronously inside the transition (or at once without the API).
`options`	`types` for CSS phase selectors; see ViewTransitionOptions. Undefined starts a transition without types.

Returns#

A promise that resolves when the transition has finished (or at once without the API). It rejects with the error update threw.

Throws#

Nothing synchronously. An error thrown by update rejects the returned promise.

Examples#

import { useSignal } from "@shadow-js/core";
import { startViewTransition } from "@shadow-js/web";

const [, setPage] = useSignal("home");
async function openSettings() {
  await startViewTransition(() => setPage("settings"), { types: ["forward"] });
}