πŸš€ 8.9 Released! β†’ ⚑️ New Node-API Engine Preview, πŸ“² ns widget ios, πŸ’… Tailwind v4 and more...
Read Announcement
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
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

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

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /