Skip to content

pantoken / transition

transition

Béta

@pantoken/plugin-transition — az InstUI Transition segédprogramjának mögötti CSS.

Az InstUI Transition-ja be-/kilépési animációkat vezet az állapotonkénti osztálynevek (…-entering, …-entered, …-exiting, …-exited) elemre történő kapcsolgatásával, amikor csatlakozik és leválasztódik. Ez a bővítmény azokat a szabályokat bocsátja ki — egy alap .instui-transition (az animált transition tulajdonság) plusz a fade, scale és slide-{up,down,left,right} típus/állapot osztályok — és definiálja az --instui-transition-duration / --instui-transition-timing tokenokat, amelyeket olvasnak. Kapcsolgassa az állapot osztályt a saját JS-ből (vagy egy keretrendszer átmenet csoportjából); a CSS végzi az animációt.

Példa

ts
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>

Interfészek

Változók

Függvények

Hivatkozások

default

A transition átnevezése és újraexportálása