pantoken / transition

transition

Beta

@pantoken/plugin-transition — the CSS behind InstUI's Transition utility.

InstUI's Transition drives enter/exit animations by toggling per-state class names (…-entering, …-entered, …-exiting, …-exited) on an element as it mounts and unmounts. This plugin emits those rules — a base .instui-transition (the animated transition property) plus the fade, scale, and slide-{up,down,left,right} type/state classes — and defines the --instui-transition-duration / --instui-transition-timing tokens they read. Toggle the state class from your own JS (or a framework's transition group); the CSS does the animation.

Example

import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";
import { transition } from "@pantoken/plugin-transition";

const css = toCss(byTheme("rebrand"), { plugins: [transition()] });
// <div class="instui-transition -fade-entered">…</div>

Interfaces

• TransitionOptions

Variables

• TRANSITION_RULES

Functions

• transitionRules
• transitionRootCss
• transition

References

default

Renames and re-exports transition