docs: cross-fade between pages with view transitions (#33888)

Navigating between pages in the docs app swapped the content instantly.
This enables the router's `withViewTransitions()`, so browsers that
support the View Transitions API cross-fade from the old page to the new
one. Other browsers keep the current behavior.

Changes:
- Add `withViewTransitions({skipInitialTransition: true})` to the router
  config. The first page load isn't animated, since there's no previous
  page to transition from.
- Add a global `prefers-reduced-motion: reduce` rule that disables the
  view transition animations, so those users get an instant page swap.

Checked in Chrome against the dev server, comparing against a run with
`document.startViewTransition` removed to get the behavior without
transitions:
- Clicking a category card runs a 250ms cross-fade of the root.
- The first page load doesn't start a transition.
- Focus still moves to the new page's `focusOnNavigation` target.
- Navigating to another page with a `#fragment` still scrolls the target
  heading into view, at the same position as without transitions.
- With reduced motion, the transition starts but runs no animations.

(cherry picked from commit 6064a60)

Author: MeAkib

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
+}