Consulter les études de cas sur les transitions

Swetha Gopalakrishnan

Saurabh Rajpal

Les transitions de vue sont animées et fluides entre différents états. de l'UI d'une page Web ou d'une application. La API View Transition a été conçu vous permettent de créer ces effets de façon plus directe et performante ce qui était possible auparavant. L'API offre de nombreux avantages par rapport aux Approches JavaScript, y compris:

• Expérience utilisateur améliorée:des transitions fluides et des repères visuels guident les utilisateurs. grâce à des modifications de l'interface utilisateur, ce qui rend la navigation plus naturelle et moins troublante.
• Continuité visuelle:maintenir un sentiment de continuité entre les vues réduit la charge cognitive et aide les utilisateurs à rester concentrés dans l'application.
• Performance:l'API tente d'utiliser aussi peu de ressources de thread principal que ce qui crée des animations plus fluides.
• Esthétique moderne:les transitions améliorées permettent de créer une expérience utilisateur engageante.

Ce post fait partie d'une série discutant de la façon dont les entreprises d'e-commerce amélioré son site Web grâce à de nouvelles fonctionnalités CSS et UI. Dans cet article, vous découvrirez comment certaines entreprises ont implémenté l'API View Transition et en ont bénéficié.

redBus

redBus s'est toujours efforcé d'établir autant de liens entre ses applications natives et que possible. Avant l'utilisation de l'API View Transition, leur implémentation les animations sur nos ressources Web était un défi. Mais avec l'API, nous avons découvert intuitifs pour créer des transitions entre plusieurs parcours utilisateur et rendre le Web à une expérience semblable à celle d'une application. Combiné aux avantages en termes de performances, doit disposer d'une fonctionnalité pour tous les sites Web. Kumar, ingénieur principal responsable, redBus.

L'équipe a implémenté des transitions de vue à plusieurs endroits. Voici un exemple : d'une combinaison d'animations de fondu à l'ouverture et de glissement à l'ouverture de l'icône de connexion de la page d'accueil .

Code

Cette implémentation utilise plusieursview-transition-nameanimations personnalisées (scale-down et scale-up). Utiliser 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 crée également un objet ::view-transition-group dans l'arborescence des pseudo-éléments (voir l'exemple du code), ce qui permet de la manipuler séparément du code par défaut ::view-transition-group(root)

::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 change de mode. entre les miniatures de produits.

L'implémentation est très simple. Avec startViewTransition, nous pouvons immédiatement bénéficier d'une transition "Fondu" plus agréable que dans l'implémentation précédente. sans aucun effet. Andy Wihalim, Senior Software Ingénieur, Tokopedia.

Avant

Après

Code

Le code suivant utilise un framework React et inclut du code spécifique au framework, tels que flushSync.. En savoir plus sur l'utilisation de frameworks pour implémenter des vues de transition. Il s'agit d'une implémentation de base qui vérifie si le navigateur prend en charge startViewTransition et, le cas échéant, effectue la transition. Dans le cas contraire, au comportement par défaut.

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

Policybazaar investissement a utilisé l'API View Transition pour les éléments d'aide comme "pourquoi acheter", pour les rendre visuellement attrayantes et améliorer l'utilisation de ces fonctionnalités.

En incorporant des transitions d'affichage, nous avons éliminé les ressources CSS et JavaScript répétitives du code chargé de gérer les animations à travers différents états. Enregistré développement continu et a permis 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. Il convient de noter la possibilité de remplacer les styles et animations par défaut ::view-transition-old(root)et::view-transition-new(root). Dans ce cas, la valeur par défaut animation-duration a été remplacée par 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 de avoir un nom de transition "view-transition-name" différent pour chaque effet ou section afin d'éviter les conflits.

Lorsqu'une transition de vue est active (transition), elle ajoute un nouveau calque sur en haut du reste de l'UI. Évitez donc de déclencher la transition au passage de la souris, car l'événement mouseLeave est déclenché de manière inattendue (lorsque le curseur se trouve toujours pas en mouvement).

Ressources

• Des transitions fluides et simples avec l'API View Transition
• Explication: Transitions des vues pour l'approbation multipartite (MPA)
• Étude de cas: Navigation fluide rendue possible grâce aux transitions de vue
• Étude de cas: Le Web peut faire quoi ? | Proposez 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 SPA (application monopage) et l'MPA.

Lisez les autres articles de cette série sur l'e-commerce entreprises ont profité de l'utilisation de nouvelles fonctionnalités CSS et UI, comme animations, pop-over, requêtes de conteneur et sélecteur has().

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