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

updateState() ​

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

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

Update transition state.

Parameters ​

Returns ​

void