diff --git a/files/en-us/web/api/document/activeviewtransition/index.md b/files/en-us/web/api/document/activeviewtransition/index.md new file mode 100644 index 000000000000000..34d983b03511cb1 --- /dev/null +++ b/files/en-us/web/api/document/activeviewtransition/index.md @@ -0,0 +1,58 @@ +--- +title: "Document: activeViewTransition property" +short-title: activeViewTransition +slug: Web/API/Document/activeViewTransition +page-type: web-api-instance-property +browser-compat: api.Document.activeViewTransition +--- + +{{APIRef("DOM")}} + +The **`activeViewTransition`** read-only property of the {{domxref("Document")}} interface returns a {{domxref("ViewTransition")}} instance representing the [view transition](/en-US/docs/Web/API/View_Transition_API) currently active on the document. + +The current {{domxref("ViewTransition")}} can be accessed in other ways: + +- The return value of {{domxref("Document.startViewTransition()")}} in the case of same-document view transitions. +- The `viewTransition` property of the {{domxref("Window.pagereveal_event", "pagereveal")}} and {{domxref("Window.pageswap_event", "pageswap")}} event objects in the case of cross-document view transitions. + +However, the `activeViewTransition` property provides a consistent way to access the active view transition in any context, without having to worry about saving it for easy access later on. + +## Value + +A {{domxref("ViewTransition")}} or `null` if there is no active view transition. + +## Examples + +```js +// Start a view transition +document.startViewTransition(() => { + // Update the UI to reflect the new state + updateUI(); +}); + +// Check if a view transition is currently active +if (document.activeViewTransition) { + console.log("A view transition is currently active"); +} + +// Respond to view transition finishing +document.activeViewTransition.finished.then(() => { + console.log("View transition finished"); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Document.startViewTransition()")}} +- {{domxref("Window.pagereveal_event", "pagereveal")}} event +- {{domxref("Window.pageswap_event", "pageswap")}} event +- [View Transition API](/en-US/docs/Web/API/View_Transition_API) +- {{domxref("ViewTransition")}} diff --git a/files/en-us/web/api/document/index.md b/files/en-us/web/api/document/index.md index 00c51f7264d02ef..16dedfc09eb7b8f 100644 --- a/files/en-us/web/api/document/index.md +++ b/files/en-us/web/api/document/index.md @@ -26,6 +26,8 @@ _This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventT - {{DOMxRef("Document.activeElement")}} {{ReadOnlyInline}} - : Returns the {{DOMxRef('Element')}} that currently has focus. +- {{DOMxRef("Document.activeViewTransition")}} {{ReadOnlyInline}} + - : Returns a {{DOMxRef('ViewTransition')}} instance representing the [view transition](/en-US/docs/Web/API/View_Transition_API) currently active on the document, or `null` if there is no active view transition. - {{DOMxRef("Document.adoptedStyleSheets")}} - : Add an array of constructed stylesheets to be used by the document. These stylesheets may also be shared with shadow DOM subtrees of the same document. diff --git a/files/en-us/web/api/document/startviewtransition/index.md b/files/en-us/web/api/document/startviewtransition/index.md index a94ff44e48aa4dc..454cdd33a9471c7 100644 --- a/files/en-us/web/api/document/startviewtransition/index.md +++ b/files/en-us/web/api/document/startviewtransition/index.md @@ -75,20 +75,20 @@ section { const colors = ["darkred", "darkslateblue", "darkgreen"]; const colBlock = document.querySelector("section"); let count = 0; -const updateColour = () => { +const updateColor = () => { colBlock.style = `--bg: ${colors[count]}`; count = count !== colors.length - 1 ? ++count : 0; }; const changeColor = () => { // Fallback for browsers that don't support View Transitions: if (!document.startViewTransition) { - updateColour(); + updateColor(); return; } // With View Transitions: const transition = document.startViewTransition(() => { - updateColour(); + updateColor(); }); }; const changeColorButton = document.querySelector("#change-color"); @@ -111,6 +111,7 @@ Otherwise, the background color is set using a fallback method, without any anim ## See also +- {{domxref("Document.activeViewTransition")}} - {{CSSXRef(":active-view-transition")}} pseudo-class - {{cssxref(":active-view-transition-type", ":active-view-transition-type()")}} pseudo-class - [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) diff --git a/files/en-us/web/api/pagerevealevent/viewtransition/index.md b/files/en-us/web/api/pagerevealevent/viewtransition/index.md index 87248ecb9863f46..f6176cd157ff677 100644 --- a/files/en-us/web/api/pagerevealevent/viewtransition/index.md +++ b/files/en-us/web/api/pagerevealevent/viewtransition/index.md @@ -10,6 +10,9 @@ browser-compat: api.PageRevealEvent.viewTransition The **`viewTransition`** read-only property of the {{domxref("PageRevealEvent")}} interface contains a {{domxref("ViewTransition")}} object representing the active view transition for the cross-document navigation. +> [!NOTE] +> The active view transition can also be accessed via the {{domxref("Document.activeViewTransition")}} property. + ## Value A {{domxref("ViewTransition")}} object, or `null` if no view transition is active when the event is fired. diff --git a/files/en-us/web/api/pageswapevent/viewtransition/index.md b/files/en-us/web/api/pageswapevent/viewtransition/index.md index f9256376d45116b..c986325d2a96e6a 100644 --- a/files/en-us/web/api/pageswapevent/viewtransition/index.md +++ b/files/en-us/web/api/pageswapevent/viewtransition/index.md @@ -10,6 +10,9 @@ browser-compat: api.PageSwapEvent.viewTransition The **`viewTransition`** read-only property of the {{domxref("PageRevealEvent")}} interface contains a {{domxref("ViewTransition")}} object representing the active view transition for the cross-document navigation. +> [!NOTE] +> The active view transition can also be accessed via the {{domxref("Document.activeViewTransition")}} property. + ## Value A {{domxref("ViewTransition")}} object, or `null` if no view transition is active when the event is fired. diff --git a/files/en-us/web/api/view_transition_api/using/index.md b/files/en-us/web/api/view_transition_api/using/index.md index d3f2277df138e30..5ecfe48063da68c 100644 --- a/files/en-us/web/api/view_transition_api/using/index.md +++ b/files/en-us/web/api/view_transition_api/using/index.md @@ -306,8 +306,9 @@ A view transition has an associated {{domxref("ViewTransition")}} object instanc The `ViewTransition` can be accessed like so: -1. In the case of same-document (SPA) transitions, the {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method returns the `ViewTransition` associated with the transition. -2. In the case of cross-document (MPA) transitions: +1. Via the {{domxref("Document.activeViewTransition")}} property. This provides a consistent way to access the active view transition in any context, without having to worry about saving it for easy access later on. +2. In the case of same-document (SPA) transitions, the {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method returns the `ViewTransition` associated with the transition. +3. In the case of cross-document (MPA) transitions: - A {{domxref("Window.pageswap_event", "pageswap")}} event is fired when a document is about to be unloaded due to a navigation. Its event object ({{domxref("PageSwapEvent")}}) provides access to the `ViewTransition` via the {{domxref("PageSwapEvent.viewTransition")}} property, as well as a {{domxref("NavigationActivation")}} via {{domxref("PageSwapEvent.activation")}} containing the navigation type and current and destination document history entries. > [!NOTE] > If the navigation has a cross-origin URL anywhere in the redirect chain, the `activation` property returns `null`. diff --git a/files/en-us/web/api/viewtransition/index.md b/files/en-us/web/api/viewtransition/index.md index 294c3b42f7090ed..a8573654ab8c5bf 100644 --- a/files/en-us/web/api/viewtransition/index.md +++ b/files/en-us/web/api/viewtransition/index.md @@ -11,8 +11,9 @@ The **`ViewTransition`** interface of the {{domxref("View Transition API", "View This object type is made available in the following ways: -- In the case of same-document (SPA) transitions, it is returned by the {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method. -- In the case of cross-document (MPA) transitions, it is made available: +- Via the {{domxref("Document.activeViewTransition")}} property. This provides a consistent way to access the active view transition in any context, without having to worry about saving it for easy access later on. +- In the case of same-document (SPA) transitions, it is also returned by the {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} method. +- In the case of cross-document (MPA) transitions, it is also made available: - 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.