# Transition

> Atom — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add transition
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { Transition } from 'orn-ui/transition';
```

Depende de: core (theme + icons)

## Variantes

### fade (default)

```tsx
<Toggle preset="fade" />
```

### preset={['fade', 'slide-up']}

```tsx
<Toggle preset={['fade', 'slide-up']} distance={32} />
```

### preset='pop' — spring

```tsx
<Toggle preset="pop" />
```

### preset={['fade', 'slide-right']}

```tsx
<Toggle preset={['fade', 'slide-right']} distance={48} />
```

### delay per index — staggered list

```tsx
<StaggeredList />
```

### exit before unmount

```tsx
<ExitBeforeUnmount />
```

## Código completo del demo

```tsx
const variants: VariantDef[] = [
  { label: 'fade (default)', content: <Toggle preset="fade" /> },
  { label: "preset={['fade', 'slide-up']}", content: <Toggle preset={['fade', 'slide-up']} distance={32} /> },
  { label: "preset='pop' — spring", content: <Toggle preset="pop" /> },
  { label: "preset={['fade', 'slide-right']}", content: <Toggle preset={['fade', 'slide-right']} distance={48} /> },
  { label: 'delay per index — staggered list', content: <StaggeredList /> },
  { label: 'exit before unmount', content: <ExitBeforeUnmount /> },
];
return <VariantList variants={variants} />;
```

## Props

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `children` | `React.ReactNode` | — | — |
| `visible?` | `boolean` | true | Entra cuando es true, sale (y desmonta) cuando es false. |
| `preset?` | `TransitionPreset \| TransitionPreset[]` | fade | Uno o más: 'fade scale' combina opacidad y escala. |
| `duration?` | `number` | tokens.duration.base | Duración del timing en ms. |
| `delay?` | `number` | 0 | ms antes de arrancar. Un delay por índice escalona una lista. |
| `distance?` | `number` | 24 | Píxeles que recorren los presets de slide. |
| `spring?` | `boolean` | — | Spring en vez de timing (implícito en 'pop'). |
| `appear?` | `boolean` | true | Anima también el primer render. En false arranca ya presente. |
| `keepMounted?` | `boolean` | false | Deja el nodo montado al salir, solo lo esconde. |
| `value?` | `Animated.Value` | — | Progreso 0→1 manejado desde afuera. Con esto, Transition solo interpola: quien lo pasa decide cuándo y cómo avanza (un PanResponder, por ejemplo). |
| `onEntered?` | `() => void` | — | — |
| `onExited?` | `() => void` | — | — |
| `style?` | `StyleProp<ViewStyle>` | — | — |