Cookbooks / View transitions

View Transitions API

Wrap in-page updates in document.startViewTransition(). For route changes, pass withViewTransitions() to Angular’s provideRouter. Base UI dialog boxes already set view-transition-name: base-dialog.

  1. Name the element. Set view-transition-name on the panel or dialog box you want the browser to morph. Base UI dialogs ship with view-transition-name: base-dialog.
  2. Wrap the DOM update. Call document.startViewTransition(() => { …state change… }) so the browser snapshots old and new UI. Feature-detect — Safari 18+ and Chromium support it.
  3. Open dialogs inside the callback. DialogService.open() inserts the overlay immediately. Wrapping open() in startViewTransition captures the incoming dialog.
  4. Use the router for page changes. Add withViewTransitions() to provideRouter for route-level morphs. Keep in-page tabs on startViewTransition so the URL can stay put.

Tabs

The active panel uses view-transition-name: base-tab-panel. Switch to morph the content.

In-page tabs keep the URL. Use the router (and withViewTransitions()) when the panel should be a real route.

Dialog

Open a modal inside the view-transition callback.

Router

typescript

provideRouter(routes, withViewTransitions())

typescript

document.startViewTransition(() => this.panel.set('activity'));

typescript

document.startViewTransition(() => {
  this.dialog.open(SettingsDialogComponent);
});