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).

Afficher ou masquer un élément

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

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 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

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 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. 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 — afficher un élément quelques secondes après l’ouverture de l’écran
• Animation — animer un élément lorsqu’il apparaît ou disparaît

Afficher un élément quelques secondes après l’ouverture de l’écran

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 : 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.

Animer un élément à son apparition ou sa disparition

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

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

• Un élément avec visibilité conditionnelle : 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 : 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.