Plain Cross-document View Transitions 1/2

Cross-document navigation with the View Transition API (Level 2) enables smooth transitions between pages, bringing the seamless look and feel of single-page applications to your multi-page app.

Some HTML elements on your page may change their internal state over time or in response to user interactions. However, when transitioning to the next page, this dynamic state is typically lost and reverts to the static values defined in the HTML.

This can affect:

• Element properties, such as the open or closed state of detail elements (e.g., those in the navigation bar), and specific CSS classes like lightdark.
• CSS properties, such as the user's preferred color scheme.
• The position of scrollbars, e.g. in long navigation bars
• The current playback time of media elements, including audio and video.
• The current playback time of CSS animations, transitions and animated SVGs.
• The state and content of input fields.
• The content of iframes.