diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index e9f38881765e613..7d2992ea16201ee 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -10404,6 +10404,8 @@ /en-US/docs/Web/API/VideoTrackList/onaddtrack /en-US/docs/Web/API/VideoTrackList/addtrack_event /en-US/docs/Web/API/VideoTrackList/onchange /en-US/docs/Web/API/VideoTrackList/change_event /en-US/docs/Web/API/VideoTrackList/onremovetrack /en-US/docs/Web/API/VideoTrackList/removetrack_event +/en-US/docs/Web/API/View_Transitions_API /en-US/docs/Web/API/View_Transition_API +/en-US/docs/Web/API/View_Transitions_API/Using /en-US/docs/Web/API/View_Transition_API/Using /en-US/docs/Web/API/VisualViewport/onresize /en-US/docs/Web/API/VisualViewport/resize_event /en-US/docs/Web/API/VisualViewport/onscroll /en-US/docs/Web/API/VisualViewport/scroll_event /en-US/docs/Web/API/WEBGL_compressed_texture_es3 /en-US/docs/Web/API/WEBGL_compressed_texture_etc diff --git a/files/en-us/web/api/document/index.md b/files/en-us/web/api/document/index.md index 21beac08e98165c..f5a7f227e7e2993 100644 --- a/files/en-us/web/api/document/index.md +++ b/files/en-us/web/api/document/index.md @@ -263,7 +263,7 @@ _This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventT - {{DOMxRef("Document.requestStorageAccessFor()")}} {{experimental_inline}} - : Allows top-level sites to request third-party cookie access on behalf of embedded content originating from another site in the same [related website set](/en-US/docs/Web/API/Storage_Access_API/Related_website_sets). - {{domxref("Document.startViewTransition()")}} - - : Starts a new {{domxref("View Transitions API", "view transition", "", "nocode")}} and returns a {{domxref("ViewTransition")}} object to represent it. + - : Starts a new {{domxref("View Transition API", "view transition", "", "nocode")}} and returns a {{domxref("ViewTransition")}} object to represent it. The `Document` interface is extended with the {{DOMxRef("XPathEvaluator")}} interface: diff --git a/files/en-us/web/api/document/startviewtransition/index.md b/files/en-us/web/api/document/startviewtransition/index.md index e53e1e03af526df..082fb593411a1d3 100644 --- a/files/en-us/web/api/document/startviewtransition/index.md +++ b/files/en-us/web/api/document/startviewtransition/index.md @@ -6,11 +6,11 @@ page-type: web-api-instance-method browser-compat: api.Document.startViewTransition --- -{{APIRef("View Transitions API")}} +{{APIRef("View Transition API")}} -The **`startViewTransition()`** method of the {{domxref("Document")}} interface starts a new same-document (SPA) [view transition](/en-US/docs/Web/API/View_Transitions_API) and returns a {{domxref("ViewTransition")}} object to represent it. +The **`startViewTransition()`** method of the {{domxref("Document")}} interface starts a new same-document (SPA) [view transition](/en-US/docs/Web/API/View_Transition_API) and returns a {{domxref("ViewTransition")}} object to represent it. -When `startViewTransition()` is invoked, a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_process). +When `startViewTransition()` is invoked, a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process). ## Syntax @@ -32,7 +32,7 @@ A {{domxref("ViewTransition")}} object instance. ### Basic usage -In our [Basic SPA View Transitions demo](https://mdn.github.io/dom-examples/view-transitions/spa/), the `updateView()` function handles both browsers that do and don't support the View Transitions API. In supporting browsers, we invoke `startViewTransition()` to trigger the view transition process without worrying about the return value. +In our [Basic SPA View Transitions demo](https://mdn.github.io/dom-examples/view-transitions/spa/), the `updateView()` function handles both browsers that do and don't support the View Transition API. In supporting browsers, we invoke `startViewTransition()` to trigger the view transition process without worrying about the return value. ```js function updateView(event) { @@ -71,4 +71,4 @@ function updateView(event) { ## See also -- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/navigationactivation/entry/index.md b/files/en-us/web/api/navigationactivation/entry/index.md index bd3a0cb1bdf0c18..e386c5723f82edf 100644 --- a/files/en-us/web/api/navigationactivation/entry/index.md +++ b/files/en-us/web/api/navigationactivation/entry/index.md @@ -33,4 +33,4 @@ See the main {{domxref("NavigationActivation")}} page. ## See also - [Navigation API](/en-US/docs/Web/API/Navigation_API) -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/navigationactivation/from/index.md b/files/en-us/web/api/navigationactivation/from/index.md index 682834b202b24de..a067ec17e3edc26 100644 --- a/files/en-us/web/api/navigationactivation/from/index.md +++ b/files/en-us/web/api/navigationactivation/from/index.md @@ -34,4 +34,4 @@ See the main {{domxref("NavigationActivation")}} page. ## See also - [Navigation API](/en-US/docs/Web/API/Navigation_API) -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/navigationactivation/index.md b/files/en-us/web/api/navigationactivation/index.md index 12676e8866d771e..2b87a847c6420f3 100644 --- a/files/en-us/web/api/navigationactivation/index.md +++ b/files/en-us/web/api/navigationactivation/index.md @@ -92,4 +92,4 @@ window.addEventListener("pagereveal", async (e) => { ## See also - [Navigation API](/en-US/docs/Web/API/Navigation_API) -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/navigationactivation/navigationtype/index.md b/files/en-us/web/api/navigationactivation/navigationtype/index.md index 98743993dda7743..87a9d5b5e17b7c9 100644 --- a/files/en-us/web/api/navigationactivation/navigationtype/index.md +++ b/files/en-us/web/api/navigationactivation/navigationtype/index.md @@ -46,4 +46,4 @@ window.addEventListener("pageswap", (event) => { ## See also - [Navigation API](/en-US/docs/Web/API/Navigation_API) -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/pagerevealevent/index.md b/files/en-us/web/api/pagerevealevent/index.md index 14c0cd97018e2bf..04f9011dbe626b3 100644 --- a/files/en-us/web/api/pagerevealevent/index.md +++ b/files/en-us/web/api/pagerevealevent/index.md @@ -9,7 +9,7 @@ browser-compat: api.PageRevealEvent The **`PageRevealEvent`** event object is made available inside handler functions for the {{domxref("Window.pagereveal_event", "pagereveal")}} event. -During a cross-document navigation, it allows you to manipulate a related [view transition](/en-US/docs/Web/API/View_Transitions_API) (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated _to_, if a view transition was triggered by the navigation. +During a cross-document navigation, it allows you to manipulate a related [view transition](/en-US/docs/Web/API/View_Transition_API) (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated _to_, if a view transition was triggered by the navigation. Outside view transitions, this event is also useful for cases such as triggering a startup animation, or reporting a page view. It's equivalent to the first {{domxref("Window.requestAnimationFrame()")}} run after a cross-document navigation, if you were to trigger `requestAnimationFrame()` in the {{htmlelement("head")}} of the document. For example, if you ran the following `reveal()` function in the `
`: @@ -100,4 +100,4 @@ window.addEventListener("pagereveal", async (e) => { ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/pagerevealevent/pagerevealevent/index.md b/files/en-us/web/api/pagerevealevent/pagerevealevent/index.md index 79d1a7547354082..9d377451a00d7a7 100644 --- a/files/en-us/web/api/pagerevealevent/pagerevealevent/index.md +++ b/files/en-us/web/api/pagerevealevent/pagerevealevent/index.md @@ -40,4 +40,4 @@ A developer would not use this constructor manually. A new `PageRevealEvent` obj ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/pagerevealevent/viewtransition/index.md b/files/en-us/web/api/pagerevealevent/viewtransition/index.md index 74019d3519fbc30..87248ecb9863f46 100644 --- a/files/en-us/web/api/pagerevealevent/viewtransition/index.md +++ b/files/en-us/web/api/pagerevealevent/viewtransition/index.md @@ -29,4 +29,4 @@ See the main {{domxref("PageRevealEvent")}} page. ## See also - [Navigation API](/en-US/docs/Web/API/Navigation_API) -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/pageswapevent/activation/index.md b/files/en-us/web/api/pageswapevent/activation/index.md index e5b70bdcd5ebace..b69c587b0bef315 100644 --- a/files/en-us/web/api/pageswapevent/activation/index.md +++ b/files/en-us/web/api/pageswapevent/activation/index.md @@ -28,4 +28,4 @@ See the main {{domxref("PageSwapEvent")}} page. ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/pageswapevent/index.md b/files/en-us/web/api/pageswapevent/index.md index b70cfe0a5d25ff9..f308f1ba48ac73a 100644 --- a/files/en-us/web/api/pageswapevent/index.md +++ b/files/en-us/web/api/pageswapevent/index.md @@ -9,7 +9,7 @@ browser-compat: api.PageSwapEvent The **`PageSwapEvent`** event object is made available inside handler functions for the {{domxref("Window.pageswap_event", "pageswap")}} event. -The `pageswap` event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the `PageSwapEvent` event object allows you to manipulate the related [view transition](/en-US/docs/Web/API/View_Transitions_API) (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 documents. +The `pageswap` event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the `PageSwapEvent` event object allows you to manipulate the related [view transition](/en-US/docs/Web/API/View_Transition_API) (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 documents. ## Constructor @@ -88,4 +88,4 @@ window.addEventListener("pageswap", async (e) => { ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/pageswapevent/pageswapevent/index.md b/files/en-us/web/api/pageswapevent/pageswapevent/index.md index 6a6109cfd7b5762..151fba106d28306 100644 --- a/files/en-us/web/api/pageswapevent/pageswapevent/index.md +++ b/files/en-us/web/api/pageswapevent/pageswapevent/index.md @@ -42,4 +42,4 @@ A developer would not use this constructor manually. A new `PageSwapEvent` objec ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/pageswapevent/viewtransition/index.md b/files/en-us/web/api/pageswapevent/viewtransition/index.md index edff695cc1275ce..f9256376d45116b 100644 --- a/files/en-us/web/api/pageswapevent/viewtransition/index.md +++ b/files/en-us/web/api/pageswapevent/viewtransition/index.md @@ -28,4 +28,4 @@ See the main {{domxref("PageSwapEvent")}} page. ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) diff --git a/files/en-us/web/api/view_transitions_api/index.md b/files/en-us/web/api/view_transition_api/index.md similarity index 85% rename from files/en-us/web/api/view_transitions_api/index.md rename to files/en-us/web/api/view_transition_api/index.md index c0268f0f2528a75..3f748d469aa5f91 100644 --- a/files/en-us/web/api/view_transitions_api/index.md +++ b/files/en-us/web/api/view_transition_api/index.md @@ -1,6 +1,6 @@ --- -title: View Transitions API -slug: Web/API/View_Transitions_API +title: View Transition API +slug: Web/API/View_Transition_API page-type: web-api-overview browser-compat: - api.Document.startViewTransition @@ -8,9 +8,9 @@ browser-compat: spec-urls: https://drafts.csswg.org/css-view-transitions/ --- -{{DefaultAPISidebar("View Transitions API")}} +{{DefaultAPISidebar("View Transition API")}} -The **View Transitions 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). +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 @@ -26,11 +26,11 @@ However, creating view transitions on the web has historically been difficult: 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 Transitions API provides an easy way of handling the required view changes and transition animations for both the above use cases. +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 Transitions API](/en-US/docs/Web/API/View_Transitions_API/Using) for more information. +See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) for more information. ## Interfaces @@ -84,7 +84,7 @@ See [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Us - [Basic View Transitions SPA demo](https://mdn.github.io/dom-examples/view-transitions/spa/): A basic image gallery demo with view transitions, featuring separate animations between old and new images, and old and new captions. - [Basic View Transitions MPA demo](https://mdn.github.io/dom-examples/view-transitions/mpa/): A sample two-page site that demonstrates usage of cross-document (MPA) view transitions, providing a custom "swipe up" transition when the two pages are navigated between. -- [HTTP 203 playlist](https://http203-playlist.netlify.app/): A video player demo app that features several different SPA view transitions, many of which are explained in [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/). +- [HTTP 203 playlist](https://http203-playlist.netlify.app/): A video player demo app that features several different SPA view transitions, many of which are explained in [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/). - [List of Chrome DevRel team members](https://view-transitions.chrome.dev/profiles/mpa/): A basic team profile pages app that demonstrates how to use the {{domxref("Window.pagereveal_event", "pagereveal")}} and {{domxref("Window.pageswap_event", "pageswap")}} events to customize the outgoing and inbound animations of a cross-document view transition based on the "from" and "to" URLs. ## Specifications @@ -97,5 +97,5 @@ See [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Us ## See also -- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) -- [View Transitions API: Creating Smooth Page Transitions](https://stackdiary.com/view-transitions-api/) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [View Transition API: Creating Smooth Page Transitions](https://stackdiary.com/view-transitions-api/) diff --git a/files/en-us/web/api/view_transitions_api/using/index.md b/files/en-us/web/api/view_transition_api/using/index.md similarity index 97% rename from files/en-us/web/api/view_transitions_api/using/index.md rename to files/en-us/web/api/view_transition_api/using/index.md index 7aa6adc3ca8ad8a..06377dbd88aa8b4 100644 --- a/files/en-us/web/api/view_transitions_api/using/index.md +++ b/files/en-us/web/api/view_transition_api/using/index.md @@ -1,14 +1,14 @@ --- -title: Using the View Transitions API -slug: Web/API/View_Transitions_API/Using +title: Using the View Transition API +slug: Web/API/View_Transition_API/Using page-type: guide status: - experimental --- -{{DefaultAPISidebar("View Transitions API")}} +{{DefaultAPISidebar("View Transition API")}} -This article explains the theory behind how the [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) works, how to create view transitions and customize the transition animations, and how to manipulate active view transitions. This covers view transitions for both DOM state updates in a single-page app (SPA), and navigating between documents in a multi-page app (MPA). +This article explains the theory behind how the [View Transition API](/en-US/docs/Web/API/View_Transition_API)) works, how to create view transitions and customize the transition animations, and how to manipulate active view transitions. This covers view transitions for both DOM state updates in a single-page app (SPA), and navigating between documents in a multi-page app (MPA). ## The view transition process @@ -125,7 +125,7 @@ Our [View Transitions MPA demo](https://mdn.github.io/dom-examples/view-transiti ## Customizing your animations -The View Transitions pseudo-elements have default [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) applied (which are detailed in their [reference pages](/en-US/docs/Web/API/View_Transitions_API#pseudo-elements)). +The View Transitions pseudo-elements have default [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) applied (which are detailed in their [reference pages](/en-US/docs/Web/API/View_Transition_API#pseudo-elements)). Most appearance transitions are given a default smooth cross-fade animation, as mentioned above. There are some exceptions: @@ -287,7 +287,7 @@ figcaption { This works because, by default, `::view-transition-group` transitions `width` and `height` between the old and new views with a smooth scale. We just needed to set a fixed `height` on both states to make it work. -> **Note:** [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples. +> **Note:** [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples. ## Controlling view transitions with JavaScript diff --git a/files/en-us/web/api/viewtransition/finished/index.md b/files/en-us/web/api/viewtransition/finished/index.md index bedfe0e6dd577b7..ace27ee740e0702 100644 --- a/files/en-us/web/api/viewtransition/finished/index.md +++ b/files/en-us/web/api/viewtransition/finished/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.ViewTransition.finished --- -{{APIRef("View Transitions API")}} +{{APIRef("View Transition API")}} The **`finished`** read-only property of the {{domxref("ViewTransition")}} interface is a {{jsxref("Promise")}} that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user. @@ -55,4 +55,4 @@ async function handleTransition() { ## See also -- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/viewtransition/index.md b/files/en-us/web/api/viewtransition/index.md index 250eae2e7c86592..60af4ea4848a24c 100644 --- a/files/en-us/web/api/viewtransition/index.md +++ b/files/en-us/web/api/viewtransition/index.md @@ -5,9 +5,9 @@ page-type: web-api-interface browser-compat: api.ViewTransition --- -{{APIRef("View Transitions API")}} +{{APIRef("View Transition API")}} -The **`ViewTransition`** interface of the {{domxref("View Transitions API", "View Transitions API", "", "nocode")}} represents an active 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. +The **`ViewTransition`** interface of the {{domxref("View Transition API", "View Transition API", "", "nocode")}} represents an active 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. This object type is made available in the following ways: @@ -16,7 +16,7 @@ This object type is made available in the following ways: - In the outgoing page via the {{domxref("Window.pageswap_event", "pageswap")}} event object's {{domxref("PageSwapEvent.viewTransition")}} property. - In the inbound page via the {{domxref("Window.pagereveal_event", "pagereveal")}} event object's {{domxref("PageRevealEvent.viewTransition")}} property. -When a view transition is triggered by a `startViewTransition()` call (or a page navigation in the case of MPA transitions), a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_process). This also explains when the different promises fulfill. +When a view transition is triggered by a `startViewTransition()` call (or a page navigation in the case of MPA transitions), a sequence of steps is followed as explained in [The view transition process](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_process). This also explains when the different promises fulfill. ## Instance properties @@ -108,4 +108,4 @@ This animation also requires the following CSS, to turn off the default CSS anim ## See also -- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/viewtransition/ready/index.md b/files/en-us/web/api/viewtransition/ready/index.md index e1bb02f16ff0965..6593db53fa50738 100644 --- a/files/en-us/web/api/viewtransition/ready/index.md +++ b/files/en-us/web/api/viewtransition/ready/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.ViewTransition.ready --- -{{APIRef("View Transitions API")}} +{{APIRef("View Transition API")}} The **`ready`** read-only property of the {{domxref("ViewTransition")}} interface is a {{jsxref("Promise")}} that fulfills once the pseudo-element tree is created and the transition animation is about to start. @@ -93,4 +93,4 @@ This animation also requires the following CSS, to turn off the default CSS anim ## See also -- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/viewtransition/skiptransition/index.md b/files/en-us/web/api/viewtransition/skiptransition/index.md index 33a00de1b44982e..f09a9013fddeab3 100644 --- a/files/en-us/web/api/viewtransition/skiptransition/index.md +++ b/files/en-us/web/api/viewtransition/skiptransition/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-method browser-compat: api.ViewTransition.skipTransition --- -{{APIRef("View Transitions API")}} +{{APIRef("View Transition API")}} The **`skipTransition()`** method of the {{domxref("ViewTransition")}} interface skips the animation part of the view transition, but doesn't skip running the associated view update. @@ -61,4 +61,4 @@ document.addEventListener("pagereveal", (event) => { ## See also -- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/viewtransition/updatecallbackdone/index.md b/files/en-us/web/api/viewtransition/updatecallbackdone/index.md index 841ff3580175110..c99d5fcc4cb75e6 100644 --- a/files/en-us/web/api/viewtransition/updatecallbackdone/index.md +++ b/files/en-us/web/api/viewtransition/updatecallbackdone/index.md @@ -6,7 +6,7 @@ page-type: web-api-instance-property browser-compat: api.ViewTransition.updateCallbackDone --- -{{APIRef("View Transitions API")}} +{{APIRef("View Transition API")}} The **`updateCallbackDone`** read-only property of the {{domxref("ViewTransition")}} interface is a {{jsxref("Promise")}} that fulfills when the promise returned by the {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method's callback fulfills, or rejects when it rejects. @@ -43,4 +43,4 @@ See [Transitions as an enhancement](https://developer.chrome.com/docs/web-platfo ## See also -- [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/window/pagereveal_event/index.md b/files/en-us/web/api/window/pagereveal_event/index.md index 84c7663a5dafda4..575aeeedb1e535e 100644 --- a/files/en-us/web/api/window/pagereveal_event/index.md +++ b/files/en-us/web/api/window/pagereveal_event/index.md @@ -10,7 +10,7 @@ browser-compat: api.Window.pagereveal_event The **`pagereveal`** event is 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](/en-US/docs/Glossary/bfcache) (bfcache) or [prerender](/en-US/docs/Glossary/Prerender)). -This is useful in the case of cross-document (MPA) [view transitions](/en-US/docs/Web/API/View_Transitions_API) for manipulating an active transition from the inbound page of a navigation. For example, you might wish to skip the transition, or customize the inbound transition animation via JavaScript. +This is useful in the case of cross-document (MPA) [view transitions](/en-US/docs/Web/API/View_Transition_API) for manipulating an active transition from the inbound page of a navigation. For example, you might wish to skip the transition, or customize the inbound transition animation via JavaScript. ## Syntax @@ -98,5 +98,5 @@ window.addEventListener("pagereveal", async (e) => { ## See also -- [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Using) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) - {{domxref("Window.pageswap_event", "pageswap")}} event diff --git a/files/en-us/web/api/window/pageswap_event/index.md b/files/en-us/web/api/window/pageswap_event/index.md index 2eb30eed759ed77..fc61ba8a2c2b6d1 100644 --- a/files/en-us/web/api/window/pageswap_event/index.md +++ b/files/en-us/web/api/window/pageswap_event/index.md @@ -10,7 +10,7 @@ browser-compat: api.Window.pageswap_event The **`pageswap`** event is fired when you navigate across documents, when the previous document is about to unload. -This is useful in the case of cross-document (MPA) [view transitions](/en-US/docs/Web/API/View_Transitions_API) for manipulating an active transition from the outbound page of a navigation. For example, you might wish to skip the transition, or customize the outbound transition animation via JavaScript. +This is useful in the case of cross-document (MPA) [view transitions](/en-US/docs/Web/API/View_Transition_API) for manipulating an active transition from the outbound page of a navigation. For example, you might wish to skip the transition, or customize the outbound transition animation via JavaScript. It also provides access to the navigation type and current and destination document history entries. @@ -101,5 +101,5 @@ window.addEventListener("pageswap", async (e) => { ## See also -- [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Using) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) - {{domxref("Window.pagereveal_event", "pagereveal")}} event diff --git a/files/en-us/web/css/@view-transition/index.md b/files/en-us/web/css/@view-transition/index.md index d568317cf6e4c13..da57fa751b396bd 100644 --- a/files/en-us/web/css/@view-transition/index.md +++ b/files/en-us/web/css/@view-transition/index.md @@ -7,7 +7,7 @@ browser-compat: css.at-rules.view-transition {{CSSRef}} -The **`@view-transition`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to opt in the current and destination documents to undergo a [view transition](/en-US/docs/Web/API/View_Transitions_API), in the case of a cross-document navigation. +The **`@view-transition`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to opt in the current and destination documents to undergo a [view transition](/en-US/docs/Web/API/View_Transition_API), in the case of a cross-document navigation. For a cross-document view transition to work, the current and destination documents of the navigation also need to be on the same origin. @@ -100,6 +100,6 @@ See this [transitions multi-page app](https://mdn.github.io/dom-examples/view-tr - {{cssxref("::view-transition-old", "::view-transition-old()")}} - {{cssxref("::view-transition-group", "::view-transition-group()")}} - {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}} -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) - [CSS at-rules](/en-US/docs/Web/CSS/At-rule) - [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions) diff --git a/files/en-us/web/css/_doublecolon_view-transition-group/index.md b/files/en-us/web/css/_doublecolon_view-transition-group/index.md index 74db620d9414ee4..f03722f4cc0249e 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-group/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-group/index.md @@ -9,7 +9,7 @@ browser-compat: css.selectors.view-transition-group The **`::view-transition-group`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a single view transition snapshot group. -During a view transition, `::view-transition-group` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of {{cssxref("::view-transition")}}, and has a {{cssxref("::view-transition-image-pair")}} as a child. +During a view transition, `::view-transition-group` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of {{cssxref("::view-transition")}}, and has a {{cssxref("::view-transition-image-pair")}} as a child. `::view-transition-group` is given the following default styling in the UA stylesheet: @@ -70,5 +70,5 @@ In addition, the element's transform is animated from the "old" view state's scr ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) -- [Smooth transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md b/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md index bc1c128348254cf..45a09ec6e689864 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md @@ -7,9 +7,9 @@ browser-compat: css.selectors.view-transition-image-pair {{CSSRef}} -The **`::view-transition-image-pair`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a container for a [view transition's](/en-US/docs/Web/API/View_Transitions_API) "old" and "new" view states — before and after the transition. +The **`::view-transition-image-pair`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a container for a [view transition's](/en-US/docs/Web/API/View_Transition_API) "old" and "new" view states — before and after the transition. -During a view transition, `::view-transition-image-pair` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-group")}}. In terms of children, it can have a {{cssxref("::view-transition-new")}} or a {{cssxref("::view-transition-old")}}, or both. +During a view transition, `::view-transition-image-pair` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-group")}}. In terms of children, it can have a {{cssxref("::view-transition-new")}} or a {{cssxref("::view-transition-old")}}, or both. `::view-transition-image-pair` is given the following default styling in the UA stylesheet: @@ -61,5 +61,5 @@ During a view transition, `::view-transition-image-pair` has {{cssxref("isolatio ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) -- [Smooth transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/css/_doublecolon_view-transition-new/index.md b/files/en-us/web/css/_doublecolon_view-transition-new/index.md index a0b81d0fdeccb78..0170b045cb3fdc5 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-new/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-new/index.md @@ -9,7 +9,7 @@ browser-compat: css.selectors.view-transition-new The **`::view-transition-new`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the "new" view state of a view transition — a snapshot live representation of the state after the transition. -During a view transition, `::view-transition-new` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-image-pair")}}, and never has any children. +During a view transition, `::view-transition-new` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-image-pair")}}, and never has any children. It is a replaced element and therefore can be manipulated with properties such as {{cssxref("object-fit")}} and {{cssxref("object-position")}}. It has natural dimensions equal to the content's size. @@ -117,5 +117,5 @@ figcaption { ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) -- [Smooth transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/css/_doublecolon_view-transition-old/index.md b/files/en-us/web/css/_doublecolon_view-transition-old/index.md index 0f2bfa65cf3cad1..a19cfb41fcd4e8c 100644 --- a/files/en-us/web/css/_doublecolon_view-transition-old/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition-old/index.md @@ -9,7 +9,7 @@ browser-compat: css.selectors.view-transition-old The **`::view-transition-old`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the "old" view state of a view transition — a static snapshot of the old view, before the transition. -During a view transition, `::view-transition-old` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree), provided there's an "old" view state to represent. It is only ever a child of a {{cssxref("::view-transition-image-pair")}}, and never has any children. +During a view transition, `::view-transition-old` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), provided there's an "old" view state to represent. It is only ever a child of a {{cssxref("::view-transition-image-pair")}}, and never has any children. It is a replaced element and therefore can be manipulated with properties such as {{cssxref("object-fit")}} and {{cssxref("object-position")}}. It has natural dimensions equal to the content's size. @@ -117,5 +117,5 @@ figcaption { ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) -- [Smooth transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/css/_doublecolon_view-transition/index.md b/files/en-us/web/css/_doublecolon_view-transition/index.md index 398f02450413266..c1d8e4e7f0e361c 100644 --- a/files/en-us/web/css/_doublecolon_view-transition/index.md +++ b/files/en-us/web/css/_doublecolon_view-transition/index.md @@ -7,9 +7,9 @@ browser-compat: css.selectors.view-transition {{CSSRef}} -The **`::view-transition`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the root of the [view transitions](/en-US/docs/Web/API/View_Transitions_API) overlay, which contains all view transition snapshot groups and sits over the top of all other page content. +The **`::view-transition`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the root of the [view transitions](/en-US/docs/Web/API/View_Transition_API) overlay, which contains all view transition snapshot groups and sits over the top of all other page content. -During a view transition, `::view-transition` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transitions_API/Using#the_view_transition_pseudo-element_tree). It is the top-level node of this tree, and has one or more {{cssxref("::view-transition-group")}}s as children. +During a view transition, `::view-transition` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is the top-level node of this tree, and has one or more {{cssxref("::view-transition-group")}}s as children. `::view-transition` is given the following default styling in the UA stylesheet: @@ -48,5 +48,5 @@ All {{cssxref("::view-transition-group")}} pseudo-elements are positioned relati ## See also -- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API) -- [Smooth transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/css/at-rule/index.md b/files/en-us/web/css/at-rule/index.md index e3d1c37dccf43ea..ed0d72dd796bec8 100644 --- a/files/en-us/web/css/at-rule/index.md +++ b/files/en-us/web/css/at-rule/index.md @@ -68,7 +68,7 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or - {{cssxref("@supports")}} - : A conditional group rule applies its content if the browser supports the CSS features of the given condition ([CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules)). - {{cssxref("@view-transition")}} - - : Opts the current document into a [view transition](/en-US/docs/Web/API/View_Transitions_API), and the destination document as well in the case of cross-document navigation transitions. + - : Opts the current document into a [view transition](/en-US/docs/Web/API/View_Transition_API), and the destination document as well in the case of cross-document navigation transitions. ## Index diff --git a/files/en-us/web/css/css_view_transitions/index.md b/files/en-us/web/css/css_view_transitions/index.md index 02a9bd62caab6dd..2fa00d8b88e272b 100644 --- a/files/en-us/web/css/css_view_transitions/index.md +++ b/files/en-us/web/css/css_view_transitions/index.md @@ -9,7 +9,7 @@ spec-urls: {{CSSRef}} -The **CSS view transitions** module defines the behavior of the [View Transition API](/en-US/docs/Web/API/View_Transitions_API), which allows developers to create animated transitions between different states within a document and across documents. This module also defines the CSS properties and pseudo-elements for styling these transitions. +The **CSS view transitions** module defines the behavior of the [View Transition API](/en-US/docs/Web/API/View_Transition_API), which allows developers to create animated transitions between different states within a document and across documents. This module also defines the CSS properties and pseudo-elements for styling these transitions. ## Reference @@ -48,7 +48,7 @@ The **CSS view transitions** module defines the behavior of the [View Transition ## Guides -- [Using the View Transitions API](/en-US/docs/Web/API/View_Transitions_API/Using) +- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) - : Explains how to create view transitions and customize transition animations, including manipulating active view transitions. diff --git a/files/en-us/web/css/view-transition-name/index.md b/files/en-us/web/css/view-transition-name/index.md index 068bbd4008910b5..08a596e38a8904b 100644 --- a/files/en-us/web/css/view-transition-name/index.md +++ b/files/en-us/web/css/view-transition-name/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.view-transition-name {{CSSRef}} -The **`view-transition-name`** [CSS](/en-US/docs/Web/CSS) property provides the selected element with a distinct identifying name (a {{cssxref("custom-ident")}}) and causes it to participate in a separate [view transition](/en-US/docs/Web/API/View_Transitions_API) from the root view transition — or no view transition if the `none` value is specified. +The **`view-transition-name`** [CSS](/en-US/docs/Web/CSS) property provides the selected element with a distinct identifying name (a {{cssxref("custom-ident")}}) and causes it to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition — or no view transition if the `none` value is specified. ## Syntax @@ -23,7 +23,7 @@ view-transition-name: none; ### Values - {{cssxref("custom-ident")}} - - : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transitions_API) from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped. + - : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped. > [!NOTE] > The `