Transition — Kuito Documentação

Utilização

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

Declaração do tipo

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

Membros 9

Nome	Tipo	Obrigatório	Descrição
`opacity`	`Animation<unknown> \| AnimationSpec`	Não	—
`backgroundColor`	`Animation<unknown> \| AnimationSpec`	Não	—
`transform`	`Animation<unknown> \| AnimationSpec`	Não	—
`borderRadius`	`Animation<unknown> \| AnimationSpec`	Não	—
`borderColor`	`Animation<unknown> \| AnimationSpec`	Não	—
`shadow`	`Animation<unknown> \| AnimationSpec`	Não	—
`width`	`Animation<unknown> \| AnimationSpec`	Não	—
`height`	`Animation<unknown> \| AnimationSpec`	Não	—
`all`	`Animation<unknown> \| AnimationSpec`	Não	—

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.