---
title: "Transiciones de pantalla"
description: "Anima cómo aparecen y desaparecen las pantallas cuando los usuarios navegan por un flow."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

Puedes animar las transiciones entre pantallas: cómo desaparece una pantalla y aparece la nueva. Las animaciones disponibles dependen de la acción de navegación concreta:

- [**Navigate to Screen**](onboarding-actions#navigate-to-screen): Abre los [ajustes de acción](#customize-a-transition) y selecciona entre la [gama completa de tipos de animación](#animation-types). Cada paso puede usar una transición diferente.
- **Navigate Next**: Solo la animación push predeterminada.
- **Navigate back**: Reproduce en sentido inverso y sin demora la transición que se usó al llegar a la pantalla actual. Si no había animación al llegar, tampoco la habrá al volver.
- **Close Flow**: No tiene animación propia. Tu app es responsable de la transición entre el flow y la interfaz nativa.

## Tipos de animación \{#animation-types\}

El menú desplegable **Animation** de la acción **Navigate to Screen** tiene cinco opciones:

- **Push**: La nueva pantalla entra desde un borde y empuja la pantalla actual hacia el otro lado.
- **Slide in**: La nueva pantalla se desliza y aparece con fundido sobre la pantalla actual, que se mueve un poco en la misma dirección.
- **Slide out**: La pantalla actual se desliza y desaparece con fundido, dejando al descubierto la nueva pantalla debajo.
- **Fade through**: La nueva pantalla aparece con fundido sobre la pantalla actual.
- **None**: La nueva pantalla reemplaza a la actual al instante.

## Personalizar una transición \{#customize-a-transition\}

Solo puedes cambiar la animación en una acción **Navigate to Screen**.

1. Selecciona el elemento que activa una acción de navegación.
2. En el panel **Interactions**, haz clic en la acción de navegación.
3. Si la acción es **Navigate Next**, selecciona **Navigate to Screen** en el desplegable **Action**. A continuación, selecciona la siguiente pantalla como **Destination**.
4. Selecciona una animación en el desplegable **Animation**.
5. Si la animación tiene opciones de **Direction**, **Easing** o **Duration**, ajústalas.
6. Para mantener la pantalla actual visible antes de que comience la animación, introduce un valor en el campo **Delay**. Por ejemplo, usa un delay para mantener una [pantalla de carga](builder-loaders-and-progress-bars#loaders) visible durante unos segundos. Las [acciones listadas después de la navegación](onboarding-actions#action-order) no esperan al delay.
7. Para ver la transición en tus propias pantallas, [prueba el flow en un dispositivo](paywall-device-compatibility-preview#preview-on-devices).