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.
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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 .
<ph type="x-smartling-placeholder">Code
Cette implémentation utilise plusieursview-transition-name
animations 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.
<ph type="x-smartling-placeholder">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()
.