Les transitions de vue sont des transitions fluides et animées entre les différents états d'une page Web ou de l'interface utilisateur 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 approches JavaScript précédentes, y compris:
- Expérience utilisateur améliorée:des transitions fluides et des repères visuels guident les utilisateurs lors des modifications de l'interface utilisateur, ce qui rend la navigation naturelle et moins perturbante.
- 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 crée des animations plus fluides.
- Esthétique moderne:les transitions améliorées contribuent à une expérience utilisateur soignée et attrayante.
Ce post fait partie d'une série expliquant comment les entreprises d'e-commerce ont amélioré leur site Web à l'aide de nouvelles fonctionnalités CSS et UI. Dans cet article, découvrez comment certaines entreprises ont implémenté et tiré parti de l'API View Transitions.
redBus
redBus a toujours essayé d'offrir autant d'égalité que possible entre l'expérience native et l'expérience Web. Avant l'API View Transitions, il était difficile d'implémenter ces animations sur nos éléments Web. Toutefois, avec l'API, nous avons trouvé qu'il est intuitif de créer des transitions entre plusieurs parcours utilisateur afin de rendre l'expérience Web semblable à une application. Ces avantages, associés à des performances accrues, en font une fonctionnalité incontournable pour tous les sites Web (Amit Kumar, responsable ingénierie senior, redBus).
L'équipe a implémenté des transitions d'affichage à plusieurs endroits. Voici un exemple de combinaison d'animations de fondu à l'ouverture et de glissement 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 permet de séparer 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 nouvel élément ::view-transition-group dans l'arborescence de pseudo-éléments (illustré dans le code suivant), ce qui vous permet de le manipuler séparément de l'élément ::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 d'affichage pour ajouter une animation de fondu lorsque l'utilisateur passe d'une miniature de produit à une autre.
L'implémentation est si facile qu'en utilisant
startViewTransition, nous obtenons immédiatement une transition en fondu 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 au framework, tel que flushSync.. Découvrez comment utiliser des frameworks pour implémenter des transitions de vues.
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 de l'investissement de Policybazaar a utilisé l'API View Transitions pour 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 vues, nous avons éliminé le code CSS et JavaScript répétitif chargé de gérer les animations selon différents états. Cela 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 la possibilité de 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é mise à jour et est désormais de 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'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, une nouvelle couche est ajoutée au-dessus du reste de l'UI. Évitez donc de déclencher la transition lors du survol, car l'événement mouseLeave se déclenchera de manière inattendue (lorsque le curseur réel ne bouge toujours pas).
Ressources
- Transitions simples et fluides grâce à l'API View Transitions
- Explication: Transitions d'affichage pour une MPA
- Étude de cas: Navigation fluide rendue possible grâce aux transitions de vues
- Étude de cas: le Web peut faire quoi ? | Proposer des navigations semblables à celles d'une application
- Proposition d'interopérabilité: rendre les transitions de vue disponibles dans tous les navigateurs
- Souhaitez-vous signaler un bug ou demander une nouvelle fonctionnalité ? Votre avis nous intéresse concernant la SPA et la MPA.
Découvrez les autres articles de cette série qui expliquent comment les entreprises d'e-commerce ont tiré parti des nouvelles fonctionnalités CSS et UI, telles que les animations basées sur le défilement, le pop-up, les requêtes de conteneur et le sélecteur has().