Transition — Kuito Dokumentation

Verwendung

Choose transitions per property.

tsx

// Choose transitions per property.
import { Box, signal, spring, timing, type Transition } from 'kuito';

// One feel for every card in the app: quick fades, springy moves.
const cardTransition: Transition = {
  opacity: timing(150),
  transform: spring({ damping: 18, stiffness: 220 }),
  shadow: timing(150),
};

const lifted = signal(false);

<Box
  transition={cardTransition}
  animate={{ translateY: lifted.value ? -4 : 0, shadowRadius: lifted.value ? 12 : 4 }}
  onPress={() => (lifted.value = !lifted.value)}
/>;

Typdeklaration

export type Transition = Partial<
  Record<
    | 'opacity'
    | 'backgroundColor'
    | 'transform'
    | 'borderRadius'
    | 'borderColor'
    | 'shadow'
    | 'width'
    | 'height'
    | 'all',
    Animation<unknown> | AnimationSpec
  >
>;

Mitglieder 9

Name	Typ	Erforderlich	Beschreibung
`opacity`	`Animation<unknown> \| AnimationSpec`	Nein	—
`backgroundColor`	`Animation<unknown> \| AnimationSpec`	Nein	—
`transform`	`Animation<unknown> \| AnimationSpec`	Nein	—
`borderRadius`	`Animation<unknown> \| AnimationSpec`	Nein	—
`borderColor`	`Animation<unknown> \| AnimationSpec`	Nein	—
`shadow`	`Animation<unknown> \| AnimationSpec`	Nein	—
`width`	`Animation<unknown> \| AnimationSpec`	Nein	—
`height`	`Animation<unknown> \| AnimationSpec`	Nein	—
`all`	`Animation<unknown> \| AnimationSpec`	Nein	—

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.