Las transiciones de vistas son transiciones animadas y fluidas entre los diferentes estados de una página web o la IU de una aplicación. La API de View Transitions se diseñó para permitirte crear estos efectos de una manera más sencilla y eficiente que antes. La API ofrece varios beneficios en comparación con los enfoques anteriores de JavaScript, incluidos los siguientes:
- Experiencia del usuario mejorada: Las transiciones fluidas y los indicadores visuales guían a los usuarios por los cambios en la IU, lo que hace que la navegación se sienta natural y menos molesta.
- Continuidad visual: Mantener un sentido de continuidad entre las vistas reduce la carga cognitiva y ayuda a los usuarios a mantenerse orientados dentro de la aplicación.
- Rendimiento: La API intenta usar la menor cantidad posible de recursos de subprocesos principales, lo que crea animaciones más fluidas.
- Estética moderna: Las transiciones mejoradas contribuyen a una experiencia del usuario refinada y atractiva.
Esta publicación forma parte de una serie en la que se analiza cómo las empresas de comercio electrónico mejoraron su sitio web con nuevas funciones de IU y CSS. En este artículo, descubrirás cómo algunas empresas implementaron la API de View Transitions y se beneficiaron con ella.
redBus
redBus siempre intentó crear la mayor paridad posible entre sus experiencias nativas y web. Antes de la API de View Transitions, implementar estas animaciones en nuestros recursos web era un desafío. Sin embargo, con la API, descubrimos que es intuitivo crear transiciones en varios recorridos del usuario para que la experiencia web se parezca más a una app. Todo esto, junto con los beneficios de rendimiento, hace que sea una función imprescindible para todos los sitios web, como Amit Kuar, gerente sénior de Ingeniería de redBus.
El equipo implementó las transiciones de vistas en varios lugares. Este es un ejemplo de una combinación de animación de fundido y deslizamiento de entrada en el ícono de acceso en la página principal.
Código
Esta implementación usa variasview-transition-nameanimaciones personalizadas (scale-downy scale-up). El uso de view-transition-namecon un valor único separa el componente de acceso del resto de la página para animarlo por separado. Cuando se crea un nuevo view-transition-name único, también se crea un nuevo ::view-transition-group en el árbol de seudoelementos (que se muestra en el siguiente código), lo que permite que se manipule por separado del ::view-transition-group(root) predeterminado.
::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
El equipo usó transiciones de vista para agregar una animación que se atenúa cuando el usuario cambiaba entre miniaturas de productos.
La implementación es tan fácil: cuando se usa
startViewTransition, obtenemos inmediatamente una transición de atenuación más agradable en comparación con la implementación anterior sin ningún efecto: Andy Wihalim, ingeniero de software sénior, Tokopedia.
Antes
Después
Código
El siguiente código usa un framework de React y también incluye código específico del framework, como flushSync.Obtén más información sobre cómo trabajar con frameworks para implementar transiciones de vistas.
Esta es una implementación básica que verifica si el navegador admite startViewTransition y, de ser así, realiza la transición. De lo contrario, recurre al comportamiento predeterminado.
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})} />
Bazar de políticas
En la vertical de inversión de Policybazaar, se usó la API de View Transitions en elementos de ayuda para brindar propina, como "por qué comprar", lo que los hizo visualmente atractivos y mejoró el uso de esas funciones.
Al incorporar las transiciones de vistas, eliminamos el código CSS y JavaScript repetitivo responsable de administrar las animaciones en varios estados. Esto ahorró esfuerzos de desarrollo y mejoró significativamente la experiencia del usuario. —Aman Soni, líder en tecnología, Policybazaar
Código
El siguiente código es similar a los ejemplos anteriores. Se debe tener en cuenta la capacidad de anular los diseños y las animaciones predeterminados de ::view-transition-old(root) y ::view-transition-new(root). En este caso, el valor predeterminado de animation-duration se actualizó a 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;
}
Aspectos que debes tener en cuenta cuando usas la API de View Transitions
Cuando uses varios efectos de transición de vista en la misma página, asegúrate de tener un nombre de transición de vista diferente para cada efecto o sección a fin de evitar conflictos.
Mientras una transición de vista esté activa (en transición), se agregará una capa nueva sobre el resto de la IU. Por lo tanto, evita activar la transición cuando se coloca el cursor sobre un elemento, ya que el evento mouseLeave se activará de forma inesperada (cuando el cursor todavía no se mueva).
Recursos
- Transiciones fluidas y simples con la API de View Transitions
- Explicación: Ve las transiciones de la MPA
- Caso de éxito: Navegación sin inconvenientes gracias a las transiciones de vistas
- Caso de éxito: ¿La Web puede hacer qué? | Ofrece navegaciones similares a las de la app
- Propuesta de interoperabilidad: Permitir que las transiciones de vistas estén disponibles en todos los navegadores
- ¿Quieres informar un error o solicitar una función nueva? Queremos saber tu opinión acerca de SPA y MPA.
Explora los otros artículos de esta serie en los que se explica cómo las empresas de comercio electrónico se beneficiaron con el uso de nuevas funciones de IU y CSS, como las animaciones basadas en desplazamientos, las ventanas emergentes, las consultas de contenedores y el selector has().