Transition — Kuito Documentation

Utilisation

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)}
/>;

Déclaration du type

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

Membres 9

Nom	Type	Requis	Description
`opacity`	`Animation<unknown> \| AnimationSpec`	Non	—
`backgroundColor`	`Animation<unknown> \| AnimationSpec`	Non	—
`transform`	`Animation<unknown> \| AnimationSpec`	Non	—
`borderRadius`	`Animation<unknown> \| AnimationSpec`	Non	—
`borderColor`	`Animation<unknown> \| AnimationSpec`	Non	—
`shadow`	`Animation<unknown> \| AnimationSpec`	Non	—
`width`	`Animation<unknown> \| AnimationSpec`	Non	—
`height`	`Animation<unknown> \| AnimationSpec`	Non	—
`all`	`Animation<unknown> \| AnimationSpec`	Non	—

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.