SharedTransition

Defined in: ui/transition/shared-transition.ts

Shared Element Transitions (preview) Allows you to auto animate between shared elements on two different screesn to create smooth navigational experiences. View components can define sharedTransitionTag="name" alone with a transition through this API.

Constructors ​

Constructor ​

new SharedTransition(): SharedTransition;

Returns ​

SharedTransition

Properties ​

DEBUG ​

static DEBUG: boolean;

Defined in: ui/transition/shared-transition.ts

Enable to see various console logging output of Shared Element Transition behavior.

finishedEvent ​

static finishedEvent: string;

Defined in: ui/transition/shared-transition.ts

When the transition finishes.

inProgress ​

static inProgress: boolean;

Defined in: ui/transition/shared-transition.ts

Whether a transition is in progress or not. Note: used internally however exposed in case custom state ordering is needed. Updated when transitions start/end/cancel.

interactiveCancelledEvent ​

static interactiveCancelledEvent: string;

Defined in: ui/transition/shared-transition.ts

When the interactive transition cancels.

interactiveUpdateEvent ​

static interactiveUpdateEvent: string;

Defined in: ui/transition/shared-transition.ts

When the interactive transition updates with the percent value.

startedEvent ​

static startedEvent: string;

Defined in: ui/transition/shared-transition.ts

When the transition starts.

Methods ​

custom() ​

static custom(transition: Transition, options?: SharedTransitionConfig): {
  instance: Transition;
};

Defined in: ui/transition/shared-transition.ts

Configure a custom transition with presentation/dismissal options.

Parameters ​

Returns ​

{
  instance: Transition;
}

a configured SharedTransition instance for use with navigational APIs.

instance ​

instance: Transition;

events() ​

static events(): SharedTransitionObservable;

Defined in: ui/transition/shared-transition.ts

Listen to various shared element transition events.

Returns ​

SharedTransitionObservable

Observable

finishState() ​

static finishState(id: number): void;

Defined in: ui/transition/shared-transition.ts

Finish transition state.

Parameters ​

Returns ​

void

getSharedElements() ​

static getSharedElements(fromPage: ViewBase, toPage: ViewBase): {
  presented: View[];
  presenting: View[];
  sharedElements: View[];
};

Defined in: ui/transition/shared-transition.ts

Gather view collections based on sharedTransitionTag details.

Parameters ​

Returns ​

{
  presented: View[];
  presenting: View[];
  sharedElements: View[];
}

Collections of views pertaining to shared elements or particular pages

presented ​

presented: View[];

presenting ​

presenting: View[];

sharedElements ​

sharedElements: View[];

getState() ​

static getState(id: number): SharedTransitionState;

Defined in: ui/transition/shared-transition.ts

Get current state for any transition.

Parameters ​

Returns ​

SharedTransitionState

notifyEvent() ​

static notifyEvent(eventName: string, data: SharedTransitionEventDataPayload): void;

Defined in: ui/transition/shared-transition.ts

Notify a Shared Transition event.

Parameters ​

Returns ​

void

registerExternalRoot() ​

static registerExternalRoot(root: ViewBase): void;

Defined in: ui/transition/shared-transition.ts

Register an NS view subtree that should be searched for sharedTransitionTag elements in addition to the source page. Use this for views that are attached to the native UI but aren't reachable from the page via the NS view tree — for example, a TabView's iosBottomAccessory. The root and any of its descendants with a sharedTransitionTag will then participate in transitions originating from any page.

Registration is idempotent. Pair with unregisterExternalRoot on teardown to avoid leaking detached views into future transitions.

Parameters ​

Returns ​

void

unregisterExternalRoot() ​

static unregisterExternalRoot(root: ViewBase): void;

Defined in: ui/transition/shared-transition.ts

Remove a previously registered external root. No-op if the root wasn't registered.

Parameters ​

Returns ​

void

updateState() ​

static updateState(id: number, state: SharedTransitionState): void;

Defined in: ui/transition/shared-transition.ts

Update transition state.

Parameters ​

Returns ​

void