Ver casos de éxito de transiciones

Swetha Gopalakrishnan

Saurabh Rajpal

Las transiciones de vista son transiciones animadas y fluidas entre diferentes estados de la IU de una página web o aplicación. La API de View Transition se diseñó para permitirte crear estos efectos de una manera más sencilla y eficaz 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 las indicaciones visuales guían a los usuarios a través de los cambios en la IU, lo que hace que la navegación se sienta natural y menos brusca.
• Continuidad visual: Mantener una sensación de continuidad entre las vistas reduce la carga cognitiva y ayuda a los usuarios a orientarse dentro de la aplicación.
• Rendimiento: La API intenta usar la menor cantidad posible de recursos del subproceso principal, lo que crea animaciones más fluidas.
• Estética moderna: Las transiciones mejoradas contribuyen a una experiencia del usuario atractiva y refinada.

Esta publicación forma parte de una serie en la que se analiza cómo las empresas de comercio electrónico mejoraron sus sitios web con nuevas funciones de CSS y de IU. En este artículo, descubre cómo algunas empresas implementaron la API de View Transition 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 Transition, implementar estas animaciones en nuestros recursos web era un desafío. Sin embargo, con la API, nos resultó intuitivo crear transiciones en varios recorridos del usuario para que la experiencia web se asemeje más a la de una app. Todo esto, junto con los beneficios de rendimiento, la convierten en una función imprescindible para todos los sitios web.—Amit Kumar, gerente de Ingeniería sénior, redBus.

El equipo implementó transiciones de vistas en varios lugares. A continuación, se muestra un ejemplo de una combinación de animación de entrada gradual y deslizamiento en el ícono de acceso en la página principal.

Código

Esta implementación usa varios view-transition-name y animaciones personalizadas (scale-down y scale-up). El uso de view-transition-name con un valor único separa el componente de acceso del resto de la página para animarlo por separado. Crear un nuevo view-transition-name único también crea un nuevo ::view-transition-group en el árbol de seudoelementos (que se muestra en el siguiente código), lo que permite manipularlo 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 de desvanecimiento cuando el usuario cambia entre las miniaturas de los productos.

La implementación es muy sencilla. Con startViewTransition, inmediatamente obtenemos una transición de desvanecimiento más agradable en comparación con la implementación anterior sin efectos. Andy Wihalim, ingeniero de software sénior, Tokopedia.

Antes

Después

Código

El siguiente código usa un framework de React y contiene código específico del framework, como flushSync.. Obtén más información para trabajar con frameworks y, así, implementar transiciones de vistas. Esta es una implementación básica que verifica si el navegador admite startViewTransition y, si es así, realiza la transición. De lo contrario, se revierte 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})} />

Policybazaar

La vertical de inversión de Policybazaar usó la API de View Transition en elementos de sugerencias, como "por qué comprar", lo que los hizo visualmente atractivos y mejoró el uso de esas funciones.

Al incorporar View Transitions, eliminamos el código repetitivo de CSS y JavaScript responsable de administrar las animaciones en varios estados. Esto ahorró esfuerzo de desarrollo y mejoró significativamente la experiencia del usuario.—Aman Soni, jefe técnico, Policybazaar.

Código

El siguiente código es similar a los ejemplos anteriores. Una cosa que debes tener en cuenta es la capacidad de anular los estilos y las animaciones predeterminados de ::view-transition-old(root) y ::view-transition-new(root). En este caso, el valor predeterminado 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 a tener en cuenta cuando se usa la API de View Transition

Cuando uses varios efectos de transición de vista en la misma página, asegúrate de tener un view-transition-name diferente para cada efecto o sección para evitar conflictos.

Mientras una transición de vista está activa (en transición), se agregará una nueva capa sobre el resto de la IU. Por lo tanto, evita activar la transición cuando se coloque el cursor sobre el elemento, ya que el evento mouseLeave se activará de forma inesperada (cuando el cursor real aún no se esté moviendo).

Recursos

• Transiciones fluidas y sencillas con la API de View Transition
• Explicación: View Transitions para MPA
• Caso de éxito: Navegación fluida con View Transitions
• Caso de éxito: ¿Qué se puede hacer en la Web? | Ofrece navegaciones similares a las de las apps
• Propuesta de interoperabilidad: Hacer que las transiciones de vista estén disponibles en todos los navegadores
• ¿Quieres informar un error o solicitar una función nueva? Queremos conocer tu opinión sobre SPA y MPA.

Explora los otros artículos de esta serie que explican cómo las empresas de comercio electrónico se beneficiaron del uso de nuevas funciones de CSS y de IU, como las animaciones controladas por desplazamiento, el elemento emergente, las consultas de contenedores y el selector has().

• ¿Por qué son importantes las capacidades de la IU web para tu sitio de comercio electrónico?
• Casos de éxito de animaciones controladas por desplazamiento
• Casos de éxito de la API de Popover
• Casos de éxito de Container Queries
• Casos de éxito del selector:has()