Animation de fondus (HTML)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Utilisez les animations en fondu pour faire apparaître ou disparaître des éléments. Il existe trois types d’animations en fondu : apparition en fondu, disparition en fondu et fondu enchaîné. Chaque animation est conçue pour un scénario différent.

Cet ensemble d’animations comprend les fonctions suivantes :

La vidéo suivante illustre les animations qui affichent et masquent le contenu en fondu. Notez la barre de défilement qui apparaît et disparaît en fondu au bas de l’écran :

La vidéo suivante illustre l’animation de fondu enchaîné :

Apparition en fondu

Utilisez l’animation d’apparition en fondu pour afficher un élément ou un sous-ensemble d’éléments. Vous pouvez voir un exemple d’animation en fondu dans la barre de l’application, où de nouveaux contrôles peuvent apparaître en réponse à l’interaction utilisateur. Vous devez également utiliser l’animation en fondu pour effectuer une transition d’un élément d’espace réservé à l’élément réel lorsque le contenu se charge de manière dynamique, ou pour afficher une info-bulles ou un contrôle de boîte de dialogue personnalisé.

Notez que l’info-bulles Windows et les contrôles de boîte de dialogue incluent les animations d’apparition ou de disparition en fondu.

Disparition en fondu

Utilisez l’animation de disparition en fondu pour masquer un élément ou un sous-ensemble d’éléments. Vous pouvez voir un exemple d’animations de disparition en fondu dans les contrôles de transition tels que la barre de défilement ou l’indicateur de mouvement panoramique, qui disparaissent en fondu après un laps de temps et en l’absence de détection d’entrée utilisateur.

Fondu enchaîné

Utilisez l’animation de fondu enchaîné pour effectuer un remplacement in situ d’un élément existant par un élément entrant. L’animation fait disparaître les éléments existants alors qu’apparaissent les éléments de remplacement au même endroit.

Autres ressources

Pour les exemples de code qui illustrent l’utilisation des fonctions d’animation de fondu, voir l’exemple de la bibliothèque d’animations HTML.

Pour les meilleures pratiques de conception de l’utilisation de ces animations, voir Recommandations et liste de vérification sur les animations de fondu.

Rubriques associées

Animation de votre interface utilisateur

fadeIn

fadeOut

crossFade