Les transitions de vue sont des transitions animées et fluides entre différents états de l'UI d'une page Web ou d'une application. L'API View Transitions a été conçue pour vous permettre de créer ces effets de manière plus simple et plus performante qu'auparavant. L'API offre de nombreux avantages par rapport aux précédentes approches JavaScript, y compris :
- Expérience utilisateur améliorée : les transitions fluides et les repères visuels guident les utilisateurs à travers les modifications de l'UI, ce qui rend la navigation naturelle et moins abrupte.
- Continuité 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 possible, ce qui permet de créer 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 Transitions et en ont tiré parti.
redBus
redBus a toujours essayé de créer autant de parité que possible entre ses expériences natives et Web. Avant l'API View Transitions, il était difficile d'implémenter ces animations sur nos composants Web. Toutefois, avec l'API, nous avons trouvé intuitif de créer des transitions sur plusieurs parcours utilisateur pour rendre l'expérience Web plus semblable à une application. Tous ces avantages en termes de performances en font une fonctionnalité indispensable pour tous les sites Web.— Amit Kumar, Senior Engineering Manager, redBus.
L'équipe a implémenté des transitions de vue à plusieurs endroits. Voici un exemple de combinaison d'animation de fondu en entrée et de déplacement en entrée sur l'icône de connexion de la page d'accueil.
Code
Cette implémentation utilise plusieursview-transition-nameet animations personnalisées
(scale-downet scale-up). L'utilisation de view-transition-nameavec 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 ::view-transition-group dans l'arborescence des pseudo-éléments (affichée dans le code suivant), ce qui permet de le manipuler séparément du ::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 miniature de produit à une 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, tel que flushSync.. Pour en savoir plus, consultez Utiliser des frameworks pour implémenter des transitions de vue.
Il s'agit d'une implémentation de base qui vérifie si le navigateur est compatible avec startViewTransition et, si c'est le cas, effectue la transition. Sinon, il revient 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
La section Investissements de Policybazaar a utilisé l'API View Transitions sur les éléments d'info-bulle tels que "Pourquoi acheter", ce qui les rend visuellement attrayants et améliore l'utilisation de ces fonctionnalités.
En intégrant les transitions de vue, nous avons éliminé le code CSS et JavaScript répétitif responsable de la gestion des animations dans différents états. Cela nous a permis d'économiser des 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. Il convient de noter que vous pouvez remplacer les styles et 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é 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 Transitions
Lorsque vous utilisez plusieurs effets de transition de vue sur la même page, assurez-vous d'avoir 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 (en cours), elle ajoute un calque au-dessus du reste de l'UI. Évitez donc de déclencher la transition au survol, car l'événement mouseLeave sera déclenché de manière inattendue (alors que le curseur réel n'est pas encore en mouvement).
Ressources
- Transitions simples et fluides avec l'API View Transitions
- Explication : transitions de vue pour les applications multipages
- Étude de cas : une navigation fluide grâce aux transitions de vue
- Étude de cas : Les 1001 possibilités du Web | Proposer des navigations semblables à celles des applications
- Proposition d'interopérabilité : rendre les transitions de vue disponibles dans tous les navigateurs
- Vous souhaitez signaler un bug ou demander une nouvelle fonctionnalité ? Nous aimerions connaître votre avis sur SPA et MPA.
Découvrez les autres articles de cette série qui expliquent comment les entreprises d'e-commerce ont bénéficié de l'utilisation de nouvelles fonctionnalités CSS et d'UI telles que les animations pilotées par le défilement, les pop-ups, les requêtes de conteneur et le sélecteur has().