docs: cross-fade between pages with view transitions

docs/src/main.ts

@@ -10,7 +10,12 @@ import {ErrorHandler, provideZoneChangeDetection} from '@angular/core';
 
 import {LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {bootstrapApplication} from '@angular/platform-browser';
-import {provideRouter, withComponentInputBinding, withInMemoryScrolling} from '@angular/router';
+import {
+  provideRouter,
+  withComponentInputBinding,
+  withInMemoryScrolling,
+  withViewTransitions,
+} from '@angular/router';
 import {MaterialDocsApp} from './app/material-docs-app';
 import {MATERIAL_DOCS_ROUTES} from './app/routes';
 import {AnalyticsErrorReportHandler} from './app/shared/analytics/error-report-handler';
@@ -33,6 +38,9 @@ bootstrapApplication(MaterialDocsApp, {
       // Binds route params (e.g. `:section` and `:id`) to inputs of the routed components. Nested
       // routes also receive the params of their parent routes, since the router inherits them.
       withComponentInputBinding(),
+      // Cross-fades between pages in browsers that support the View Transitions API. The first
+      // page load isn't animated, since there's no previous page to transition from.
+      withViewTransitions({skipInitialTransition: true}),
     ),
     provideZoneChangeDetection(),
   ],

docs/src/styles.scss

@@ -29,3 +29,15 @@ html {
 @include api.api-styles;
 @include markdown.markdown-styles;
 @include tables.table-styles;
+
+// Skip the cross-fade between pages (see `withViewTransitions` in `main.ts`) for users who
+// prefer reduced motion. The new page then replaces the old one instantly.
+@media (prefers-reduced-motion: reduce) {
+  // stylelint-disable selector-pseudo-element-no-unknown -- View Transitions pseudo-elements.
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+  // stylelint-enable selector-pseudo-element-no-unknown
+}