Animer entre des vues

Découvrez comment créer une animation entre deux vues dans vos applications.

Souvent, vous souhaitez déplacer les utilisateurs entre les vues de votre application, qu'il s'agisse d'une vue sous forme de liste vers une vue détaillée ou d'une barre de navigation latérale. Les animations entre ces vues maintiennent l'engagement de l'utilisateur et ajoutent encore plus de vie à vos projets.

• Utilisez des traductions pour passer d'une vue à l'autre. Évitez d'utiliser left, top ou toute autre propriété qui déclenche la mise en page.
• Assurez-vous que les animations que vous utilisez sont dynamiques et que leur durée est courte.
• Réfléchissez à la façon dont vos animations et vos mises en page changent à mesure que la taille de l'écran augmente ; ce qui fonctionne sur un écran plus petit peut sembler étrange lorsqu'il est utilisé sur un ordinateur de bureau.

L'apparence et le comportement de ces transitions de vues dépendent du type de vues que vous utilisez. Par exemple, l'animation d'une superposition modale sur une vue doit être différente de la transition entre une liste et une vue détaillée.

Utiliser des traductions pour passer d'une vue à une autre

Pour vous faciliter la tâche, supposons qu'il existe deux vues: une vue sous forme de liste et une vue détaillée. Lorsque l'utilisateur appuie sur un élément de la liste dans la vue de liste, la vue détaillée apparaît et la vue sous forme de liste disparaît.

Pour obtenir cet effet, vous avez besoin d'un conteneur pour les deux vues sur lequel overflow: hidden est défini. Ainsi, les deux vues peuvent se trouver à l'intérieur du conteneur côte à côte sans afficher de barres de défilement horizontales, et chaque vue peut glisser d'un côté à l'autre à l'intérieur du conteneur si nécessaire.

Le CSS du conteneur est le suivant:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

La position du conteneur est définie sur relative. Cela signifie que chaque vue qu'elle contient peut être positionnée de manière absolue dans l'angle supérieur gauche, puis déplacée à l'aide de transformations. Cette approche est meilleure pour les performances que l'utilisation de la propriété left (car elle déclenche la mise en page et l'affichage) et est généralement plus facile à rationaliser.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

L'ajout d'un transition à la propriété transform offre un bon effet de diapositive. Pour le rendre agréable, il utilise une courbe cubic-bezier personnalisée, que nous avons abordée dans le guide du lissage de vitesse personnalisé.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

La vue qui se trouve hors écran doit être traduite vers la droite. Dans ce cas, la vue détaillée doit donc être déplacée:

.details-view {
  transform: translateX(100%);
}

Une petite quantité de code JavaScript est maintenant nécessaire pour gérer les classes. Cela active ou désactive les classes appropriées dans les vues.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

Enfin, nous ajoutons les déclarations CSS de ces classes.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

Essayer

Vous pouvez l'étendre à plusieurs vues, sans changer le concept de base. Chaque vue non visible doit se trouver en dehors de l'écran et être réactivée si nécessaire, et la vue actuellement à l'écran doit être supprimée.

En plus de passer d'une vue à l'autre, cette technique peut également être appliquée à d'autres éléments coulissants, tels que les éléments de navigation de la barre latérale. La seule vraie différence est que vous ne devriez pas avoir besoin de déplacer les autres vues.

S'assurer que votre animation fonctionne sur les grands écrans

Pour un écran plus grand, conservez la vue Liste en permanence au lieu de la supprimer et faites glisser la vue détaillée sur le côté droit. C'est à peu près comme traiter une vue de navigation.