transition()

Wrap a WhisqNode with enter / exit CSS animations powered by the Web Animations API. Enter fires when the node is mounted; exit fires on disposal (the node stays in the DOM until the exit animation completes).

Signature

function transition(node: WhisqNode, options: TransitionOptions): WhisqNode;

interface TransitionOptions {
  enter?: TransitionPhase;
  exit?: TransitionPhase;
}

// A phase is duration + easing + any number of CSS property [from, to] pairs
type TransitionPhase = {
  duration?: number;   // ms, default 300
  easing?: string;     // CSS easing, default "ease"
  [prop: string]: [string | number, string | number] | number | string | undefined;
};

Parameters

Param	Type	Description
node	WhisqNode	The node to animate
options	TransitionOptions	enter and/or exit phase configs

Each phase’s CSS property keys take a [from, to] tuple. Non-array values (numbers, strings) on a phase are reserved for duration / easing.

Examples

import { transition, div } from "@whisq/core";

transition(
  div({ class: "toast" }, "Saved"),
  {
    enter: {
      opacity: [0, 1],
      transform: ["translateY(10px)", "translateY(0)"],
      duration: 200,
      easing: "ease-out",
    },
    exit: {
      opacity: [1, 0],
      duration: 150,
    },
  },
);

On mount, the toast fades in and slides up over 200 ms. When the wrapping control (when(), match(), etc.) disposes it, the exit animation plays and the node is removed from the DOM when the animation settles.