VFX-JS

Your system asks for reduced motion, so VFX-JS draws nothing. Demos on this site show plain HTML.

Interface

TransitionHandle

vfx-js/src/transition/types.ts:161 ↗ 
import type { TransitionHandle } from "@vfx-js/core";

Controls the transitions of one element.

Properties

running 

readonly running: boolean

Methods

cancel 

cancel(): void

End the current run and show the live content.

destroy 

destroy(): void

Cancel and stop tracking the element.

run 

run<T extends Transition | TransitionClass<never>>(
    cb: (ctx: RunContext) => void | Promise<void>,
    opts?: Partial<TransitionSpec<T>> | (() => RunOpts<T>),
): Promise<void>

Change the DOM in cb and animate from the old content to the new. opts can be a function, called once right after cb resolves. Use it when the spec depends on the new content. With keepPlaying, call ctx.keepPlaying() in cb before you drop the old nodes.

show 

show<T extends Transition | TransitionClass<never>>(
    slide: SlideRef,
    opts?: ShowOpts<T>,
): Promise<void>

Show one slide and hide the other direct children, with a run. A detached element is appended first. Throws a TypeError when slide is not a direct child. Resolves at once when the slide is already the only one shown and no run is in flight.