Skip to content

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

Open
MeAkib wants to merge 1 commit into
angular:mainfrom
MeAkib:docs/router-view-transitions
Open

MeAkib wants to merge 1 commit into
angular:mainfrom
MeAkib:docs/router-view-transitions

Conversation

@MeAkib

@MeAkib MeAkib commented Sep 29, 2026

Copy link
Copy Markdown
Contributor

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.

@pullapprove
pullapprove Bot requested review from crisbeto and ok7sai September 29, 2026 03:22
@angular-robot angular-robot Bot added the area: docs Related to the documentation label Sep 29, 2026

@crisbeto crisbeto left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like there's a lint error.

@MeAkib
MeAkib force-pushed the docs/router-view-transitions branch from 65f0601 to d74a9b6 Compare September 29, 2026 15:41
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.
@MeAkib
MeAkib force-pushed the docs/router-view-transitions branch from d74a9b6 to afde0da Compare September 29, 2026 15:47
@MeAkib
MeAkib requested a review from crisbeto October 1, 2026 03:00

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs Related to the documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants