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.

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

export const titleViewTransition = createViewTransition();

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

.itemPage_pageTitle__1i8e34m1 {
  view-transition-name: itemPage_titleViewTransition__1i8e34m0;
}