Consulter les études de cas sur les transitions

Swetha Gopalakrishnan

Saurabh Rajpal

Les transitions de vue sont des transitions animées et fluides entre les différents états d'une page Web ou de l'interface utilisateur d'une application. L'API View Transition a été conçue pour vous permettre de créer ces effets de manière plus simple et plus performante qu'auparavant. L'API présente plusieurs avantages par rapport aux approches JavaScript précédentes, y compris les suivants:

• Amélioration de l'expérience utilisateur:les transitions fluides et les repères visuels guident les utilisateurs dans les changements de l'interface utilisateur, ce qui rend la navigation naturelle et moins choquante.
• Cohérence visuelle:maintenir un sentiment de continuité entre les vues réduit la charge cognitive et aide les utilisateurs à rester orientés dans l'application.
• Performances:l'API tente d'utiliser le moins de ressources de thread principal que possible, ce qui crée des animations plus fluides.
• Esthétique moderne:les transitions améliorées contribuent à une expérience utilisateur soignée et attrayante.

Cet article fait partie d'une série qui explique comment les entreprises d'e-commerce ont amélioré leur site Web à l'aide de nouvelles fonctionnalités CSS et d'UI. Dans cet article, découvrez comment certaines entreprises ont implémenté l'API View Transition et en ont bénéficié.

redBus

redBus s'est toujours efforcé d'établir une parité maximale entre l'expérience native et l'expérience Web. Avant l'API View Transition, l'implémentation de ces animations sur nos composants Web était difficile. Toutefois, avec l'API, nous avons trouvé qu'il était intuitif de créer des transitions entre plusieurs parcours utilisateur pour rendre l'expérience Web plus semblable à une application. Tout cela, associé aux avantages en termes de performances, en fait une fonctionnalité indispensable pour tous les sites Web.—Amit Kumar, responsable technique senior, redBus.

L'équipe a implémenté des transitions de vue à plusieurs endroits. Voici un exemple d'animation combinant un fondu à l'ouverture et une animation glissante sur l'icône de connexion de la page d'accueil.

Code

Cette implémentation utilise plusieurs view-transition-name et des animations personnalisées (scale-down et scale-up). L'utilisation de view-transition-name avec une valeur unique sépare le composant de connexion du reste de la page pour l'animer séparément. La création d'un view-transition-name unique entraîne également la création d'un ::view-transition-group dans l'arborescence des pseudo-éléments (illustrée dans le code suivant), ce qui permet de la manipuler séparément de l'::view-transition-group(root) par défaut.

::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)   
└─…

//Code for VT for login
  if (!document.startViewTransition) {
   this.setState(
     {
       closeSigninModal: condition ? true : false
     },
     () => {
       if (closeSigninCb) {
         closeSigninCb();
       }
     }
   );
 } else {
   const transition = document.startViewTransition();
   transition.ready.finally(() => {
     setTimeout(() => {
       this.setState(
         {
           closeSigninModal: condition ? true : false
         },
         () => {
           if (closeSigninCb) {
             closeSigninCb();
           }
         }
       );
     }, 500);
   });
 }

.signin_open {
 view-transition-name: signin;
}

.signin_close  {
 view-transition-name: signinclose;
}

::view-transition-group(signin),
::view-transition-group(signinclose) {
 animation-duration: 0.5s;
}

::view-transition-old(signin) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
 animation-name: -ua-view-transition-fade-in, scale-up;
}

::view-transition-new(signinclose) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}

@keyframes scale-down {
 to {
     scale: 0;
 }
}

@keyframes scale-up {
 from {
     scale: 0;
 }
}

Tokopedia

L'équipe a utilisé des transitions de vue pour ajouter une animation de fondu lorsque l'utilisateur passe d'une vignette de produit à l'autre.

L'implémentation est si simple qu'en utilisant startViewTransition, nous obtenons immédiatement une transition de fondu plus agréable par rapport à l'implémentation précédente, sans aucun effet. Andy Wihalim, ingénieur logiciel senior, Tokopedia

Avant

Après

Code

Le code suivant utilise un framework React et inclut du code spécifique au framework, comme flushSync.. Pour en savoir plus sur l'utilisation de frameworks pour implémenter des transitions de vue, consultez la documentation. Il s'agit d'une implémentation de base qui vérifie si le navigateur est compatible avec startViewTransition et, le cas échéant, effectue la transition. Sinon, le comportement par défaut est appliqué.

const handleClick =
  ({ url, index }) =>
  () => {
    if ('startViewTransition' in document) { //check if browser supports VT
      document.startViewTransition(() => {
        flushSync(() => {
          setDisplayImage({ url, index });
          setActiveImageIndex(index);
        });
      });
    } else { //if VT is not supported, fall back to default behavior
      setDisplayImage({ url, index });
      setActiveImageIndex(index);
    }
  };

...

<Thumbnail onClick={handleClick({url, index})} />

Policybazaar

Le secteur investissement de Policybazaar a utilisé l'API View Transition sur des éléments d'aide tels que "Pourquoi acheter ?", ce qui les rend visuellement attrayants et améliore l'utilisation de ces fonctionnalités.

En intégrant des transitions de vue, nous avons éliminé le code CSS et JavaScript répétitif chargé de gérer les animations dans différents états. Cela a permis de réduire les efforts de développement et d'améliorer considérablement l'expérience utilisateur.—Aman Soni, responsable technique, Policybazaar.

Code

Le code suivant est semblable aux exemples précédents. Notez que vous pouvez remplacer les styles et les animations par défaut de ::view-transition-old(root) et ::view-transition-new(root). Dans ce cas, la valeur par défaut de animation-duration a été mise à jour vers 0,4 s.

togglePBAdvantagePopup(state: boolean) {
  this.showPBAdvantagePopup = state;

  if(!document.startViewTransition) {
    changeState();
    return;
  }

  document.startViewTransition(() => {changeState();});

  function changeState() {
    document.querySelector('.block_section').classList.toggle('hide');
    document.querySelector('.righttoggle_box').classList.toggle('show');
  }
}

.righttoggle_box{
  view-transition-name: advantage-transition;
}

.block_section{
  view-transition-name: advantage-transition;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s;
}

Éléments à prendre en compte lors de l'utilisation de l'API View Transition

Lorsque vous utilisez plusieurs effets de transition de vue sur la même page, assurez-vous d'utiliser un nom de transition de vue différent pour chaque effet ou section afin d'éviter les conflits.

Lorsqu'une transition de vue est active (transition), elle ajoute une nouvelle couche au-dessus du reste de l'UI. Évitez donc de déclencher la transition lorsque vous pointez dessus, car l'événement mouseLeave sera déclenché de manière inattendue (lorsque le curseur réel ne bouge pas encore).

Ressources

• Des transitions fluides et simples avec l'API View Transition
• Explication: Transitions de vue pour la MPA
• Étude de cas: Navigation fluide grâce aux transitions de vue
• Étude de cas: Les 1001 possibilités du Web | Fournir des navigations semblables à celles d'une application
• Proposition d'interopérabilité: rendre les transitions de vue disponibles dans tous les navigateurs
• Voulez-vous signaler un bug ou demander une nouvelle fonctionnalité ? Votre avis nous intéresse pour les SPA et les MPA.

Explorez les autres articles de cette série qui expliquent comment les entreprises d'e-commerce ont tiré parti de l'utilisation de nouvelles fonctionnalités CSS et d'interface utilisateur, telles que les animations basées sur le défilement, les pop-ups, les requêtes de conteneur et le sélecteur has().

• Pourquoi les fonctionnalités d'UI Web sont-elles importantes pour votre site d'e-commerce ?
• Études de cas sur les animations déclenchées par le défilement
• Études de cas sur l'API Popover
• Études de cas sur les requêtes de conteneur
• Études de cas sur le sélecteur:has()