---
title: "Afficher et masquer des éléments à la demande, avec un délai ou une animation"
description: "Affichez ou masquez un élément de flow à l'ouverture de l'écran, lors d'un appui, ou à n'importe quel autre déclencheur. Retardez le changement ou faites disparaître l'élément en fondu, en montée ou en rebond."
---

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

Utilisez les actions **Show element** et **Hide element** pour révéler ou masquer un élément sans passer par la visibilité conditionnelle.

- Le **déclencheur** détermine ce qui provoque l'apparition ou la disparition de l'élément — un clic sur un bouton ou un changement d'écran.
- Le paramètre **délai** détermine le laps de temps entre le déclencheur et l'entrée en vigueur de l'action.
- Le paramètre **animation** détermine l'effet visuel (par défaut : Fade in / out).

:::note
Les transitions entre écrans ont [leurs propres animations](flow-screen-transitions). Pour faire passer les utilisateurs d'un écran de démarrage ou de chargement sans qu'ils aient à appuyer, [retardez une action **Navigate to Screen**](flow-screen-transitions#move-users-to-another-screen-automatically).
:::

## Afficher ou masquer un élément \{#show-or-hide-an-element\}

Par défaut, chaque élément d'un écran apparaît à l'ouverture et reste visible jusqu'à ce que l'utilisateur quitte l'écran. Les actions **Show element** et **Hide element** vous permettent de contrôler quand et comment un élément apparaît ou disparaît. Par exemple, vous pouvez :

- Afficher un bouton de fermeture quelques secondes après l'ouverture de l'écran.
- Faire apparaître un titre en fondu plutôt que de l'afficher instantanément.
- Masquer une indication lorsque l'utilisateur appuie sur son icône de fermeture.

### Déclencheurs \{#triggers\}

Chaque déclencheur s'active à un moment différent :

| Moment | Déclencheur | À ajouter sur |
|---|---|---|
| L'écran s'ouvre | **On Screen Appear** | N'importe quel élément de l'écran, même celui que l'action affiche |
| L'utilisateur appuie | **On Tap** | N'importe quel élément visible sur lequel l'utilisateur appuie, comme un bouton |
| Une vidéo se termine | **On Playback Finished** | La vidéo |
| Un [minuteur de décompte](flow-timer) se termine | **On Timer End** | Le minuteur, avec sa **Visibility** définie sur **Show** pour que le déclencheur s'active |
| L'utilisateur modifie ou soumet un champ de saisie | **On Changed** ou **On Submit** | Le champ de saisie |

### Configuration \{#setup\}

Les étapes sont identiques pour chaque déclencheur :

1. Sélectionnez l'élément du tableau correspondant au moment voulu, par exemple un bouton.
2. Dans le panneau **Interactions**, [ajoutez le déclencheur](onboarding-actions#set-up-interactions) avec une action **Show element** ou **Hide element**.
3. Dans le menu déroulant **Elements**, sélectionnez ce que vous souhaitez afficher ou masquer.
4. Sélectionnez chaque élément de l'étape 3 et ouvrez le panneau **Design**. Si l'action l'affiche, réglez **Visibility** sur **Hide** ; si l'action le masque, réglez **Visibility** sur **Show**. Si plusieurs actions le modifient, appliquez cette règle à l'action qui s'exécute en premier. Une action **Show element** n'a aucun effet sur un élément déjà visible. Pour modifier un élément masqué ultérieurement, sélectionnez-le dans le panneau **Layers** : il n'apparaît pas sur le canevas.
5. Pour voir le résultat, [testez le flow sur un appareil](paywall-device-compatibility-preview#preview-on-devices). Le canevas n'exécute pas les actions. Sur l'appareil, un élément masqué n'occupe aucun espace, donc le contenu qui l'entoure se déplace lorsqu'il apparaît et après qu'il disparaît.

Suivez les étapes ci-dessus pour configurer l'action **Show element** ou **Hide element**. Ensuite, modifiez ses paramètres :

- [**Delay**](#show-an-element-a-few-seconds-after-the-screen-opens) — afficher un élément quelques secondes après l'ouverture de l'écran
- [**Animation**](#animate-an-element-as-it-appears-or-disappears) — animer un élément lorsqu'il apparaît ou disparaît

## Afficher un élément quelques secondes après l'ouverture de l'écran \{#show-an-element-a-few-seconds-after-the-screen-opens\}

Le champ **Delay** définit combien de temps l'action attend après le déclenchement de son trigger (jusqu'à 5000 ms). Par exemple, pour afficher un bouton de fermeture trois secondes après l'ouverture de l'écran, utilisez le trigger **On Screen Appear** et réglez **Delay** sur 3000 ms. Utilisez des secondes entières : sur iOS, un délai est arrondi à la seconde supérieure.

Pour voir le délai, [testez le flow sur un appareil](paywall-device-compatibility-preview#preview-on-devices) : la fenêtre **Edit action** ne le prévisualise pas.

Pour un délai supérieur à 5 secondes, [affichez l'élément lorsqu'un minuteur de compte à rebours se termine](flow-timer#delay-when-a-close-button-appears).

## Animer un élément à son apparition ou sa disparition \{#animate-an-element-as-it-appears-or-disappears\}

La fenêtre **Edit action** propose les paramètres d'animation suivants :

| Paramètre | Ce que ça change |
|---|---|
| **Animation** | Comment l'élément apparaît ou disparaît : **None**, **Fade in** ou **Fade out**, **Rise**, ou **Pop** |
| **Easing** | Comment la vitesse évolue pendant l'animation : **Linear**, **Ease in**, **Ease out**, ou **Ease in-out** |
| **Duration** | La durée de l'animation, jusqu'à 5000 ms |
| **Distance** | Pour **Rise** : la distance de déplacement de l'élément, 1–200 px |
| **Start scale** | Pour **Pop** : la taille minimale de l'élément, de 0,1 à 0,99 de sa taille réelle |

La fenêtre **Edit action** affiche une prévisualisation en boucle de l'animation. Les utilisateurs ne peuvent appuyer sur un élément qu'après qu'il soit entièrement apparu, alors gardez une **Duration** courte pour un bouton.

Une action qui cible plusieurs éléments les anime simultanément. Pour les animer les uns après les autres, ajoutez une action par élément, chacune avec un **Delay** plus long que la précédente.

## Quand l'animation et le délai ne s'appliquent pas \{#when-animation-and-delay-dont-apply\}

Dans trois cas, **Animation** et **Delay** n'ont aucun effet :

- **Un élément avec [visibilité conditionnelle](onboarding-element-visibility)** : les actions ciblant l'élément l'affichent ou le masquent instantanément. Pour animer ou retarder l'affichage, supprimez la condition : définissez **Visibility** sur **Show** ou **Hide**.
- **Un composant réutilisable** : un élément dans un composant, ou toute cible d'une action à l'intérieur de celui-ci, apparaît ou disparaît instantanément.
- **Une [bottom sheet](builder-containers#bottom-sheet)** : la feuille s'ouvre et se ferme avec son propre mouvement, sans délai.

Dans les trois cas, la fenêtre **Edit action** affiche toujours **Animation** et **Delay**, et aucun avertissement n'apparaît lors de la publication.