View Transitions API: Innovative technologies to simplify web animation

View Transitions API provides an easier way to achieve animation between web page elements, allowing smooth transitions even between page loads. It is a progressive enhancement technology with good compatibility.

The traditional CSS transition and animation have achieved remarkable achievements in web effects, but not all animations are easy to implement. For example, cross-fade animation of a list of ten images and titles requires the following steps:

1. Keep the old DOM element;
2. Create a new DOM element and add it to the appropriate location of the page;
3. Fare out the old elements while fading in new elements;
4. (Optional) Replace the old element with the new DOM element.

The View Transitions API simplifies this process:

1. API captures snapshots of the current page status;
2. Update the DOM, add or delete necessary elements;
3. API captures snapshots of new page status;
4. API uses the default fade effect or custom CSS animation to animate transitions between two states.

We just need to update the DOM without the extra complicated steps. With just a few lines of code, you can achieve beautifully slide-like animations in browsers that support the View Transitions API.

Currently, the API is in the experimental stage, but the latest Chromium-based browser already supports single-page DOM animation effects. Chrome 115 and later also supports animations between page loads, such as on typical WordPress sites. This makes use easier without JavaScript code.

It should be noted that Mozilla and Apple have not announced their plans to implement the API in Firefox and Safari. Browsers that do not support the View Transitions API still work properly, so it is safe to add this effect now.

Comparison between new and old technologies

Senior developers may feel familiar. Internet Explorer 4.0, released in 1997, introduced element and full page transition capabilities and was updated in IE5.5, released in 2000. We can use the <meta> tag to add various transition effects in PowerPoint style:

<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')" http-equiv="Page-Enter">
<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')" http-equiv="Page-Exit">

However, this technology has not been widely adopted because it is not a web standard.

Create transition effects within the page

The following example shows how to create a simple fade effect using the View Transitions API in Chrome:

(The link and screenshot of CodePen Example 1 should be embedded here)

HTML code contains two <article></article> elements, which are used to display different content blocks:

(HTML code snippets should be embedded here)

switchArticle() function handles all DOM updates, showing or hiding each hidden element by adding or removing the <article></article> attribute. When the page loads, determine the active location.hash element based on the <article></article> or the first <article></article> element of the page URL:

(JavaScript code snippets should be embedded here)

Event handler function monitors all page clicks and calls #hash when the user clicks a link with switchArticle():

(JavaScript code snippets should be embedded here)

By passing the switchArticle() function as a callback to document.startViewTransition(), we can use the View Transitions API:

(JavaScript code snippets should be embedded here)

document.startViewTransition() will capture a snapshot of the initial state, run switchArticle(), capture a snapshot of the new state, and create a default half-second fade effect between the two.

CSS selectors ::view-transition-old(root) and ::view-transition-new(root) can be used to set the old and new states respectively:

(CSS code snippets should be embedded here)

(Survey content, including more complex animations, asynchronous DOM updates, use of Web Animations API, multi-page navigation transitions, animation disables, summary and FAQs, all need to be rewritten in a similar way, and the code in the original text is Embed the picture in the corresponding position and describe it in more concise and clear language. )

The above is the detailed content of An Introduction to the View Transitions API. For more information, please follow other related articles on the PHP Chinese website!