Animation d’ajout et de suppression d’éléments dans une liste (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 de liste pour afficher les changements apportés à une collection d’éléments similaires. Elles incluent les animations d’ajout et les animations de suppression. Notez que le terme « liste » englobe bien plus que la liste de courses classique ; il inclut les grilles, par exemple. Ces animations fournissent une transition visuelle fluide pour l’entrée ou la sortie d’éléments, qui renseigne de manière évidente l’utilisateur sur l’action qui a eu lieu. Pendant une animation d’ajout, les éléments présents s’écartent pour faire de la place au nouvel élément. Le nouvel élément se fond progressivement dans l’espace qui lui est désigné, en s’agrandissant jusqu’à sa taille finale. Une animation de suppression consiste en l’opération inverse.
Cet ensemble d’animations comprend les API suivantes :
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
Animations d’ajout/de suppression d’éléments dans une liste
Utilisez les animations de liste pour afficher l’insertion ou la suppression d’éléments dans une collection d’éléments similaires. Ces animations diffèrent des animations d’ajout/de suppression de la liste de recherche, dans la mesure où les animations de recherche sont un peu plus rapides dans la gestion du filtrage des résultats de recherche, tandis que l’utilisateur entre le terme de recherche.
La vidéo suivante illustre les animations qui ajoutent et suppriment des éléments dans une liste :
Animations d’ajout/de suppression dans la liste de recherche
Utilisez les animations de liste de recherche quand les éléments d’une liste changent rapidement pendant un scénario de recherche. Cet ensemble d’animations diffère des animations d’ajout et de suppression dans les listes en termes de synchronisation. Les animations de liste de recherche répondent plus rapidement aux scénarios tels que le filtrage continu. Par exemple, si un utilisateur entre un terme afin de rechercher un élément dans une liste et que celle-ci filtre les résultats en temps réel, les éléments filtrés et exclus doivent utiliser l’animation de suppression de la liste de recherche. Inversement, si un utilisateur recherche une chaîne, puis revient en arrière pour supprimer un caractère, tous les éléments qui sont alors ajoutés à la liste des résultats de recherche doivent utiliser l’animation d’ajout dans la liste de recherche.
La vidéo suivante illustre les animations qui ajoutent et suppriment des éléments dans une liste de recherche :
Autres ressources
Pour les exemples de code qui illustrent l’utilisation des API 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 d’ajout et de suppression.
Rubriques associées
Animation de votre interface utilisateur