8.7 released—WinterCG Compliance Part 1
Learn more
SharedTransition
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.

Summary ​

Constructors ​

constructor ​

new SharedTransition(): SharedTransition
Returns SharedTransition

Properties ​

DEBUG ​

Static
DEBUG: boolean
Enable to see various console logging output of Shared Element Transition behavior.

finishedEvent ​

Static
finishedEvent: string
When the transition finishes.

inProgress ​

Static
inProgress: boolean
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
When the interactive transition cancels.

interactiveUpdateEvent ​

Static
interactiveUpdateEvent: string
When the interactive transition updates with the percent value.

startedEvent ​

Static
startedEvent: string
When the transition starts.

Methods ​

custom ​

Static
custom(transition: Transition, options?: SharedTransitionConfig): {}
Configure a custom transition with presentation/dismissal options.
Parameter Default Description
transition
Transition

The custom Transition instance.

options
SharedTransitionConfig

Returns {}

events ​

Static
events(): SharedTransitionObservable
Listen to various shared element transition events.
Returns SharedTransitionObservable

finishState ​

Static
finishState(id: number): void
Finish transition state.
Parameter Default Description
id
number

Transition instance id

Returns void

getSharedElements ​

Static
getSharedElements(fromPage: ViewBase, toPage: ViewBase): {
presented: View[];
presenting: View[];
}
Gather view collections based on sharedTransitionTag details.
Parameter Default Description
fromPage
ViewBase

Page moving away from

toPage
ViewBase

Page moving to

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

getState ​

Static
getState(id: number): SharedTransitionState
Get current state for any transition.
Parameter Default Description
id
number

Transition instance id

Returns SharedTransitionState

notifyEvent ​

Static
notifyEvent(eventName: string, data: SharedTransitionEventDataPayload): void
Notify a Shared Transition event.
Parameter Default Description
eventName
string

Shared Transition event name

data
SharedTransitionEventDataPayload

Returns void

updateState ​

Static
updateState(id: number, state: SharedTransitionState): void
Update transition state.
Parameter Default Description
id
number

Transition instance id

state
SharedTransitionState

SharedTransitionState

Returns void
Next
SharedTransitionHelper