On this pageFunctions
Ui/Animation
/** Creates the standard leave-phase command that waits for CSS animations on the element to settle. Use this when handling the `StartedLeaveAnimating` OutMessage for components that don't need custom leave behavior. */
(model: Animation.Model): Command.Command<Message>/** Creates an initial animation model from a config. Defaults to hidden. */
(config: InitConfig): Animation.Model/** Processes an animation message and returns the next model, commands, and optional OutMessage. */
(
model: Animation.Model,
message: {
_tag: "Showed"
} | {
_tag: "Hid"
} | {
_tag: "AdvancedAnimationFrame"
} | {
_tag: "EndedAnimation"
}
): UpdateReturn/** Configuration for creating an animation model with `init`. */
type InitConfig = Readonly<{
id: string
isShowing: boolean
}>/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
type ViewInputs = Readonly<{
animateSize: boolean
attributes: ReadonlyArray<ChildAttribute>
className: string
content: Html
element: TagName
}>/** Sent internally when a double-rAF completes, advancing the lifecycle to its animating phase. */
const AdvancedAnimationFrame: CallableTaggedStruct<"AdvancedAnimationFrame", {}>/** Sent internally when all CSS animations on the element have settled. Covers both CSS transitions and CSS keyframe animations. */
const EndedAnimation: CallableTaggedStruct<"EndedAnimation", {}>/** Sent when the animation should leave (become hidden). Starts the leave sequence. */
const Hid: CallableTaggedStruct<"Hid", {}>/** Union of all messages the animation component can produce. */
const Message: S.Union<[typeof Showed, typeof Hid, typeof AdvancedAnimationFrame, typeof EndedAnimation]>/** Schema for the animation component's state, tracking its unique ID, visibility intent, and lifecycle phase. */
const Model: Struct<{
id: String
isShowing: Boolean
transitionState: Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>
}>const OutMessage: Union<readonly [CallableTaggedStruct<"StartedLeaveAnimating", {}>, CallableTaggedStruct<"TransitionedOut", {}>]>/** Advances the enter/leave lifecycle by waiting a double-rAF. */
const RequestFrame: CommandDefinitionNoArgs<"RequestFrame", Effect<{
_tag: "AdvancedAnimationFrame"
}, never, never>>/** Sent when the animation should enter (become visible). Starts the enter sequence. */
const Showed: CallableTaggedStruct<"Showed", {}>/** Sent to the parent when the leave sequence advances to LeaveAnimating. The parent is responsible for providing the command that detects when the leave animation completes (e.g. WaitForAnimationSettled or a racing command). Use `defaultLeaveCommand` for the standard behavior. */
const StartedLeaveAnimating: CallableTaggedStruct<"StartedLeaveAnimating", {}>/** Schema for the animation lifecycle state, tracking enter/leave phases. */
const TransitionState: Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>/** Sent to the parent when the leave animation completes. The parent can use this to unmount content or update its own state. */
const TransitionedOut: CallableTaggedStruct<"TransitionedOut", {}>/** Waits for all CSS animations on the element to settle. Covers both CSS transitions and CSS keyframe animations. */
const WaitForAnimationSettled: CommandDefinitionWithArgs<"WaitForAnimationSettled", {
id: String
}, Effect<{
_tag: "EndedAnimation"
}, never, never>>/**
* Renders a headless animation wrapper that coordinates CSS transitions and
* CSS keyframe animations via data attributes.
*
* Data attributes reflect the current lifecycle phase:
* - `data-closed`: element is in its hidden/initial state
* - `data-enter`: enter animation is active
* - `data-leave`: leave animation is active
* - `data-transition`: any animation is active
*/
const view: SubmodelView<Animation.Model, {
_tag: "Showed"
} | {
_tag: "Hid"
} | {
_tag: "AdvancedAnimationFrame"
} | {
_tag: "EndedAnimation"
}, Readonly<{
animateSize: boolean
attributes: readonly Array<Readonly<{
__childAttribute: true
attribute: unknown
dispatch: DispatchSync
}>>
className: string
content: Html
element: TagName
}>>