Mostrar y ocultar elementos a petición, con retraso o con animación
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).
Las transiciones entre pantallas tienen sus propias animaciones. 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.
Mostrar u ocultar un elemento
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
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 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
Los pasos son los mismos para cada trigger:
- Selecciona en la tabla el elemento que necesites en ese momento, como un botón.
- En el panel Interactions, añade el trigger con una acción Show element o Hide element.
- En el desplegable Elements, selecciona qué mostrar u ocultar.
- 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.
- Para ver el resultado, prueba el flow en un dispositivo. 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 — mostrar un elemento unos segundos después de que se abra la pantalla
- Animation — animar un elemento mientras aparece o desaparece
Mostrar un elemento unos segundos después de abrir la pantalla

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: 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.
Anima un elemento al aparecer o desaparecer
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
En tres casos, Animation y Delay no tienen efecto:
- Un elemento con visibilidad condicional: 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: 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.