---
title: "Transitions entre écrans"
description: "Animez l'apparition et la disparition des écrans lorsque les utilisateurs naviguent dans un flow."
---

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

Vous pouvez animer les transitions entre les écrans — la façon dont un écran disparaît et dont le nouveau apparaît. Les animations disponibles dépendent de l'action de navigation concernée :

- [**Navigate to Screen**](onboarding-actions#navigate-to-screen) : Ouvrez les [paramètres d'action](#customize-a-transition) et choisissez parmi la [gamme complète de types d'animation](#animation-types). Chaque étape peut utiliser une transition différente.
- **Navigate Next** : Uniquement l'animation push par défaut.
- **Navigate back** : Rejoue la transition utilisée à l'arrivée sur l'écran actuel, mais en sens inverse et sans délai. Si aucune animation n'a été appliquée à l'arrivée, il n'y en a pas non plus au retour.
- **Close Flow** : Aucune animation propre. Votre application gère elle-même la transition entre le flow et votre interface native.

## Types d'animation \{#animation-types\}

Le menu déroulant **Animation** de l'action **Navigate to Screen** propose cinq options :

- **Push** : Le nouvel écran entre par un bord et pousse l'écran actuel vers l'autre bord.
- **Slide in** : Le nouvel écran glisse et apparaît en fondu par-dessus l'écran actuel, qui se déplace légèrement dans la même direction.
- **Slide out** : L'écran actuel glisse et disparaît en fondu, révélant le nouvel écran en dessous.
- **Fade through** : Le nouvel écran apparaît en fondu par-dessus l'écran actuel.
- **None** : Le nouvel écran remplace instantanément l'écran actuel.

## Personnaliser une transition \{#customize-a-transition\}

Vous ne pouvez modifier l'animation que dans une action **Navigate to Screen**.

1. Sélectionnez l'élément qui déclenche une action de navigation.
2. Dans le panneau **Interactions**, cliquez sur l'action de navigation.
3. Si l'action est **Navigate Next**, sélectionnez **Navigate to Screen** dans le menu déroulant **Action**. Sélectionnez ensuite l'écran suivant comme **Destination**.
4. Sélectionnez une animation dans le menu déroulant **Animation**.
5. Si l'animation dispose de paramètres **Direction**, **Easing** ou **Duration**, ajustez-les.
6. Pour que l'écran actuel reste visible avant le début de l'animation, saisissez une valeur dans le champ **Delay**. Par exemple, utilisez un délai pour maintenir un [écran de chargement](builder-loaders-and-progress-bars#loaders) affiché quelques secondes. [Les actions listées après la navigation](onboarding-actions#action-order) n'attendent pas ce délai.
7. Pour voir la transition sur vos propres écrans, [testez le flow sur un appareil](paywall-device-compatibility-preview#preview-on-devices).