Class ViewTransition

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

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.

[Value("ViewTransition")]
public class ViewTransition

Inheritance

object

ViewTransition

Inherited Members

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

This object type is made available in the following ways:

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. This also explains when the different promises fulfill.

-View Transition API
-Using the View Transition API
-Using view transition types
-Smooth transitions with the View Transition API

See also on MDN

Constructors

ViewTransition()

public ViewTransition()

Properties

Finished

The finished read-only property of the
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.

[Value("finished")]
public Task<GlobalObject.Undefined> Finished { get; }

Property Value

Task<GlobalObject.Undefined>

A Promise.

Remarks

finished will only reject in the case of a same-document (SPA) transition, if the callback passed to StartViewTransition(Union20) throws or returns a promise that rejects. This would indicate that the new state of the page wasn't created.

If a transition animation fails to start or is skipped during the transition using SkipTransition(), the end state is still reached therefore finished will still fulfill.

-Smooth transitions with the View Transition API

See also on MDN

Ready

The ready read-only property of the
ViewTransition interface is a {{jsxref("Promise")}} that fulfills once the pseudo-element tree is created and the transition animation is about to start.

[Value("ready")]
public Task<GlobalObject.Undefined> Ready { get; }

Property Value

Task<GlobalObject.Undefined>

A Promise.

Remarks

ready will reject if the transition cannot begin. This can be due to misconfiguration, for example, duplicate {{cssxref("view-transition-name")}}s, or if the callback passed to StartViewTransition(Union20) throws or returns a promise that rejects.

-Smooth transitions with the View Transition API

See also on MDN

Types

The types read-only property of the
ViewTransition interface is a ViewTransitionTypeSet that allows the types set on the view transition to be accessed and modified.

[Value("types")]
public ViewTransitionTypeSet Types { get; set; }

Property Value

ViewTransitionTypeSet

A ViewTransitionTypeSet. This is a Set-like object, which means you can modify the types applied to a view transition on-the-fly using methods available on it such as clear(), add(), and delete().

Remarks

-ViewTransitionTypeSet
-View Transition API
-Using the View Transition API
-Using view transition types
-Smooth transitions with the View Transition API

See also on MDN

UpdateCallbackDone

The updateCallbackDone read-only property of the
ViewTransition interface is a {{jsxref("Promise")}} that fulfills when the promise returned by the StartViewTransition(Union20) method's callback fulfills, or rejects when it rejects.

[Value("updateCallbackDone")]
public Task<GlobalObject.Undefined> UpdateCallbackDone { get; }

Property Value

Task<GlobalObject.Undefined>

A Promise.

Remarks

updateCallbackDone is useful when you don&apos;t care about the success/failure of a same-document (SPA) view transition animation, and just want to know if and when the DOM is updated.

NOTE

In the case of a cross-document (MPA) view transition, the updateCallbackDone promise of the associated ViewTransition is automatically fulfilled.

-Smooth transitions with the View Transition API

See also on MDN

Methods

SkipTransition()

The skipTransition() method of the
ViewTransition interface skips the animation part of the view transition, but doesn't skip running the associated view update.

[Value("skipTransition")]
public GlobalObject.Undefined SkipTransition()

Returns

GlobalObject.Undefined

undefined.

Remarks

-Smooth transitions with the View Transition API

See also on MDN