Les transitions d'affichage sont des transitions fluides et animées entre 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 offre plusieurs avantages par rapport aux approches JavaScript précédentes, y compris:
- Expérience utilisateur améliorée:des transitions fluides et des repères visuels guident les utilisateurs à travers les modifications de l'interface utilisateur, pour une navigation plus naturelle et moins troublante.
- Continuité visuelle:le maintien d'un sentiment de continuité entre les vues réduit la charge cognitive et aide les utilisateurs à rester concentrés dans l'application.
- Performances:l'API tente d'utiliser le moins de ressources possible du thread principal, 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'interface utilisateur. 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 éléments Web était difficile. Mais avec l'API, nous avons trouvé qu'il était intuitif de créer des transitions entre plusieurs parcours utilisateur afin de rendre l'expérience Web plus semblable à celle d'une application. Tous ces avantages, associés aux avantages en termes de performances, en font une fonctionnalité incontournable pour tous les sites Web. - Amit Kumar, responsable principal de l'ingénierie, 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 animations view-transition-name et 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 crée également un ::view-transition-group dans l'arborescence des pseudo-éléments (illustré dans le code suivant), ce qui permet de le 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 tellement facile qu'avec
startViewTransition, la transition en fondu est immédiatement plus agréable que 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 à ce framework, tel que flushSync.. En savoir plus sur l'utilisation de 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, le cas échéant, effectue la transition. Sinon, le comportement par défaut est rétabli.
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 d'investissement de Policybazaar a utilisé l'API View Transition pour fournir des conseils d'aide tels que "pourquoi acheter", ce qui les rend visuellement attrayantes et améliore l'utilisation de ces fonctionnalités.
En incorporant des transitions d'affichage, nous avons éliminé le code CSS et JavaScript répétitif chargé de gérer les animations à travers différents états. Cela a permis d'économiser 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 qu'il est possible de remplacer les styles et animations par défaut de ::view-transition-old(root) et de ::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'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 (transition), elle ajoute une nouvelle couche au-dessus du reste de l'UI. Évitez donc de déclencher la transition au passage de la souris, car l'événement mouseLeave se déclenche de manière inattendue (lorsque le curseur ne bouge toujours pas).
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 pour les SPA et 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().