8.6 Released with 🥽 visionOS support and more!
Check it out
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

Properties

DEBUG

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

finishedEvent

Static
finishedEvent: string

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

Methods

custom

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

The custom Transition instance.

options

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

Page moving away from

toPage

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