Documentation / @ripl/vue / RiplTransitionPhaseOptions

Interface: RiplTransitionPhaseOptions<TElement>

Defined in: adapters/vue/src/core/transition.ts:25

Options for a single transition phase. Mirrors Ripl's RendererTransitionOptions, except that state is optional: the update phase derives its target from whichever props changed.

Type Parameters

Type Parameter	Default type
TElement extends Element	Element

Properties

Property	Type	Description	Defined in
delay?	number	Delay, in milliseconds, before the transition begins. Defaults to 0.	adapters/vue/src/core/transition.ts:37
direction?	TransitionDirection	Playback direction of the transition. Defaults to forward.	adapters/vue/src/core/transition.ts:39
duration?	number	Duration of the transition, in milliseconds. Defaults to 0.	adapters/vue/src/core/transition.ts:27
ease?	Ease	Easing function applied to the transition's progress. Defaults to linear.	adapters/vue/src/core/transition.ts:29
interpolators?	ElementInterpolators<RiplElementState<TElement>>	Interpolators to resolve this phase's state properties with, overriding the element's own.	adapters/vue/src/core/transition.ts:47
loop?	TransitionLoopMode	Loop behavior once the transition completes: true restarts, alternate plays back and forth. Defaults to no looping, and is ignored on the leave phase, which owns the element's destruction and so has to finish.	adapters/vue/src/core/transition.ts:35
state?	ElementInterpolationState<RiplElementState<TElement>>	The detached state for this phase: the state an entering element animates from, or the state a leaving element animates to. On the update phase it is merged over the changed props to form the target.	adapters/vue/src/core/transition.ts:45

Methods

onComplete()?

optional onComplete(element): void

Defined in: adapters/vue/src/core/transition.ts:49

Invoked with the element once its transition completes. Never called for a looping phase.

Parameters

Parameter	Type
element	Element

Returns

void