createViewTransition

Creates a single scoped view transition name for use with CSS View Transitions. This avoids potential naming collisions with other view transitions.

🚧 Ensure your target browsers support view transitions. Vanilla-extract supports the view transition syntax but does not polyfill the feature in unsupported browsers.

// itemPage.css.ts
import {
  style,
  createViewTransition
} from '@vanilla-extract/css';

export const titleViewTransition = createViewTransition();

export const pageTitle = style({
  viewTransitionName: titleViewTransition
});

// navigation.css.ts
import { style } from '@vanilla-extract/css';
import { titleViewTransition } from './itemPage.css.ts';

export const navigationLinkTitle = style({
  viewTransitionName: titleViewTransition
});