Editorial review: Document the Document.activeViewTransition property

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")}}

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.

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/)

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.

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.

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`.

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.