slide
Moves by distance (24 by default) in its direction: slide.up(12) enters
rising 12 into place and leaves rising 12 away.
Usage
Slide a view into place.
// Slide a view into place.
import { Box, fade, slide } from 'kuito';
<Box enter={slide.up(12)} exit={slide.down()} />; // 24 by default
<Box enter={fade.and(slide.left())} />;Properties and methods 4
| Name | Type | Required | Description |
|---|---|---|---|
up | (by?: number) => Effect | Yes | — Default: (by: number = 24): Effect =>
tracks('slide', [{ prop: 'translateY', enter: distance(by), exit: -by }]) |
down | (by?: number) => Effect | Yes | — Default: (by: number = 24): Effect =>
tracks('slide', [{ prop: 'translateY', enter: -distance(by), exit: by }]) |
left | (by?: number) => Effect | Yes | — Default: (by: number = 24): Effect =>
tracks('slide', [{ prop: 'translateX', enter: distance(by), exit: -by }]) |
right | (by?: number) => Effect | Yes | — Default: (by: number = 24): Effect =>
tracks('slide', [{ prop: 'translateX', enter: -distance(by), exit: by }]) |
up — method signatures
Signatures
down — method signatures
Signatures
left — method signatures
Signatures
right — method signatures
Signatures
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.