---
title: "Mostrar y ocultar elementos a petición, con retraso o con animación"
description: "Muestra u oculta un elemento de flow cuando se abre su pantalla, el usuario pulsa o se activa otro disparador. Añade un retraso o haz que el elemento aparezca con un fundido, una subida o un pop."
---

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

Usa las acciones **Show element** y **Hide element** para revelar u ocultar un elemento sin necesidad de visibilidad condicional.

- El **trigger** determina qué hace que el elemento aparezca o desaparezca: un clic en un botón o un cambio de pantalla.
- El ajuste de **delay** determina el tiempo que transcurre entre el trigger y el momento en que la acción surte efecto.
- El ajuste de **animation** determina el efecto visual (por defecto: Fade in / out).

:::note
Las transiciones entre pantallas tienen [sus propias animaciones](flow-screen-transitions). Para pasar a los usuarios de una pantalla de splash o de carga sin necesidad de un toque, [retrasa una acción **Navigate to Screen**](flow-screen-transitions#move-users-to-another-screen-automatically).
:::

## Mostrar u ocultar un elemento \{#show-or-hide-an-element\}

Por defecto, todos los elementos de una pantalla aparecen al abrirse y permanecen visibles hasta que el usuario la abandona. Con las acciones **Show element** y **Hide element**, controlas cuándo y cómo aparece o desaparece un elemento. Por ejemplo, puedes:

- Mostrar un botón de cierre unos segundos después de que se abra la pantalla.
- Hacer que un titular aparezca con fundido en lugar de mostrarse de golpe.
- Ocultar una pista cuando el usuario toca su icono de cierre.

### Desencadenantes \{#triggers\}

Cada desencadenante se activa en un momento diferente:

| Momento | Desencadenante | Añádelo a |
|---|---|---|
| La pantalla se abre | **On Screen Appear** | Cualquier elemento de la pantalla, incluso el que muestra la acción |
| El usuario pulsa | **On Tap** | Cualquier elemento visible que el usuario pulse, como un botón |
| Un vídeo termina | **On Playback Finished** | El vídeo |
| Un [temporizador de cuenta atrás](flow-timer) termina | **On Timer End** | El temporizador, con su **Visibility** establecida en **Show** para que el desencadenante se active |
| El usuario modifica o envía un campo de entrada | **On Changed** o **On Submit** | El campo de entrada |

### Configuración \{#setup\}

Los pasos son los mismos para cada trigger:

1. Selecciona en la tabla el elemento que necesites en ese momento, como un botón.
2. En el panel **Interactions**, [añade el trigger](onboarding-actions#set-up-interactions) con una acción **Show element** o **Hide element**.
3. En el desplegable **Elements**, selecciona qué mostrar u ocultar.
4. Selecciona cada elemento del paso 3 y abre el panel **Design**. Si la acción lo muestra, establece **Visibility** en **Hide**; si la acción lo oculta, establece **Visibility** en **Show**. Si varias acciones lo modifican, aplica esta regla a la que se ejecute primero. Una acción **Show element** no tiene efecto sobre lo que ya es visible. Para editar un elemento oculto más adelante, selecciónalo en el panel **Layers**: el canvas no lo muestra.
5. Para ver el resultado, [prueba el flow en un dispositivo](paywall-device-compatibility-preview#preview-on-devices). El canvas no ejecuta acciones. En el dispositivo, un elemento oculto no ocupa espacio, por lo que el contenido a su alrededor se desplaza cuando aparece y cuando desaparece.

Sigue los pasos anteriores para configurar la acción **Show element** o **Hide element**. Luego, cambia sus ajustes:

- [**Delay**](#show-an-element-a-few-seconds-after-the-screen-opens) — mostrar un elemento unos segundos después de que se abra la pantalla
- [**Animation**](#animate-an-element-as-it-appears-or-disappears) — animar un elemento mientras aparece o desaparece

## Mostrar un elemento unos segundos después de abrir la pantalla \{#show-an-element-a-few-seconds-after-the-screen-opens\}

El campo **Delay** define cuánto tiempo espera la acción después de que se active su trigger (hasta 5000 ms). Por ejemplo, para mostrar un botón de cierre tres segundos después de abrir la pantalla, usa el trigger **On Screen Appear** y establece **Delay** en 3000 ms. Usa segundos enteros: en iOS, el retraso se redondea al segundo entero superior.

Para ver el retraso, [prueba el flow en un dispositivo](paywall-device-compatibility-preview#preview-on-devices): la ventana **Edit action** no lo previsualiza.

Para un retraso superior a 5 segundos, [muestra el elemento cuando termina un temporizador de cuenta atrás](flow-timer#delay-when-a-close-button-appears).

## Anima un elemento al aparecer o desaparecer \{#animate-an-element-as-it-appears-or-disappears\}

La ventana **Edit action** tiene las siguientes opciones de animación:

| Configuración | Qué cambia |
|---|---|
| **Animation** | Cómo aparece o desaparece el elemento: **None**, **Fade in** o **Fade out**, **Rise** o **Pop** |
| **Easing** | Cómo cambia la velocidad durante la animación: **Linear**, **Ease in**, **Ease out** o **Ease in-out** |
| **Duration** | Cuánto dura la animación, hasta 5000 ms |
| **Distance** | Para **Rise**: qué distancia recorre el elemento, 1–200 px |
| **Start scale** | Para **Pop**: el tamaño mínimo del elemento, entre 0.1 y 0.99 de su tamaño completo |

La ventana **Edit action** reproduce en bucle una vista previa de la animación. Los usuarios solo pueden pulsar un elemento después de que haya aparecido por completo, así que mantén la **Duration** corta en el caso de un botón.

Una acción que apunta a varios elementos los anima todos a la vez. Para animarlos uno tras otro, añade una acción por elemento, cada una con un **Delay** mayor que la anterior.

## Cuándo no aplican la animación y el retraso \{#when-animation-and-delay-dont-apply\}

En tres casos, **Animation** y **Delay** no tienen efecto:

- **Un elemento con [visibilidad condicional](onboarding-element-visibility)**: Las acciones que apuntan al elemento lo muestran u ocultan de inmediato. Para animarlo o retrasarlo, elimina la condición: establece **Visibility** en **Show** o **Hide**.
- **Un componente reutilizable**: Un elemento dentro de un componente, o cualquier destino de una acción dentro de uno, aparece o desaparece de inmediato.
- **Una [hoja inferior](builder-containers#bottom-sheet)**: La hoja se abre y se cierra con su propio movimiento, sin retraso.

En los tres casos, la ventana **Edit action** sigue mostrando **Animation** y **Delay**, y no aparece ninguna advertencia cuando publicas.