ContextQMD
Back to Content

View Transition API

files/en-us/web/api/view_transition_api/index.md

latest7.6 KB
Original Source

{{DefaultAPISidebar("View Transition API")}}

The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).

Concepts and usage

View transitions are a popular design choice for reducing users' cognitive load, helping them stay in context, and reducing perceived loading latency as they move between states or views of an application.

However, creating view transitions on the web has historically been difficult:

  • Transitions between states in single-page apps (SPAs) tend to involve writing significant CSS and JavaScript to:
    • Handle the loading and positioning of the old and new content.
    • Animate the old and new states to create the transition.
    • Stop accidental user interactions with the old content from causing problems.
    • Remove the old content once the transition is complete. Accessibility issues like loss of reading position, focus confusion, and strange live region announcement behavior can also result from having the new and old content both present in the DOM at once.
  • Cross-document view transitions (i.e., across navigations between different pages in MPAs) have historically been impossible.

The View Transition API provides an easy way of handling the required view changes and transition animations for both the above use cases.

Creating a view transition that uses the browser's default transition animations is very quick to do, and there are features that allow you to both customize the transition animation and manipulate the view transition itself (for example specify circumstances under which the animation is skipped), for both SPA and MPA view transitions.

See Using the View Transition API for more information.

Interfaces

  • {{domxref("CSSViewTransitionRule")}}
    • : Represents a {{cssxref("@view-transition")}} at-rule.
  • {{domxref("ViewTransition")}}
    • : Represents a view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether.
  • {{domxref("ViewTransitionTypeSet")}}
    • : A set-like object representing the types of an active view transition, which enables the types to be queried or modified on-the-fly during a transition.

Extensions to other interfaces

  • {{domxref("Document.startViewTransition()")}}
    • : Starts a new same-document (SPA) view transition and returns a {{domxref("ViewTransition")}} object to represent it.
  • {{domxref("PageRevealEvent")}}
    • : The event object for the {{domxref("Window.pagereveal_event", "pagereveal")}} event. During a cross-document navigation, it allows you to manipulate the related view transition (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated to, if a view transition was triggered by the navigation.
  • {{domxref("PageSwapEvent")}}
    • : The event object for the {{domxref("Window.pageswap_event", "pageswap")}} event. During a cross-document navigation, it allows you to manipulate the related view transition (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated from, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination document history entries.
  • The {{domxref("Window")}} {{domxref("Window.pagereveal_event", "pagereveal")}} event
    • : Fired when a document is first rendered, either when loading a fresh document from the network or activating a document (either from back/forward cache (bfcache) or prerender).
  • The {{domxref("Window")}} {{domxref("Window.pageswap_event", "pageswap")}} event
    • : Fired when a document is about to be unloaded due to a navigation.

HTML additions

  • <link rel="expect">
    • : Identifies the most critical content in the associated document for the user's initial view of the page. Document rendering will be blocked until the critical content has been parsed, ensuring a consistent first paint — and therefore, view transition — across all supporting browsers.

CSS additions

At-rules

  • {{cssxref("@view-transition")}}
    • : In the case of a cross-document navigation, @view-transition is used to opt in the current and destination documents to undergo a view transition.

Properties

  • {{cssxref("view-transition-name")}}
    • : Specifies the view transition snapshot that selected elements will participate in, which enables an element to be animated separately from the rest of the page during a view transition.
  • {{cssxref("view-transition-class")}}
    • : Provides an additional method of styling selected elements that have a view-transition-name.

Pseudo-classes

  • {{cssxref(":active-view-transition")}}
    • : Matches elements when a view transition is in progress.
  • {{cssxref(":active-view-transition-type()")}}
    • : Matches elements when a view transition with one or more specific types is in progress.

Pseudo-elements

  • {{cssxref("::view-transition")}}
    • : The root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.
  • {{cssxref("::view-transition-group()")}}
    • : The root of a single view transition.
  • {{cssxref("::view-transition-image-pair()")}}
    • : The container for a view transition's old and new views — before and after the transition.
  • {{cssxref("::view-transition-old()")}}
    • : A static snapshot of the old view, before the transition.
  • {{cssxref("::view-transition-new()")}}
    • : A live representation of the new view, after the transition.

Examples

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also