Ver casos de éxito de transiciones

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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 directa 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 a través de los cambios en la IU, lo que hace que la navegación sea natural y menos discordante.
  • Cohesión 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 del subproceso principal, lo que crea animaciones más fluidas.
  • Estética moderna: Las transiciones mejoradas contribuyen a una experiencia del usuario pulida y atractiva.

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111.
  • Firefox: No es compatible.
  • Safari: 18.

Origen

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 IU. En este artículo, descubre cómo algunas empresas implementaron la API de View Transition y se beneficiaron de ella.

redBus

redBus siempre ha intentado crear la mayor paridad posible entre sus experiencias web y nativas. 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 sea más similar a una app. Todo esto, junto con los beneficios de rendimiento, la convierte en una función imprescindible para todos los sitios web. Amit Kumar, gerente sénior de Ingeniería, redBus.

El equipo implementó transiciones de vista en varios lugares. Este es un ejemplo de una combinación de animación de atenuación y deslizamiento en el ícono de acceso de la página principal.

Desvanece y desliza las transiciones de vista cuando el usuario hace clic en el ícono de acceso en la página principal de redBus.

Código

Esta implementación usa varias 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. Cuando se crea un view-transition-name único nuevo, también se crea un ::view-transition-group nuevo en el árbol de pseudoelementos (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 atenuación cuando el usuario cambia entre miniaturas de productos.

La implementación es muy fácil. Cuando usamos startViewTransition, obtenemos de inmediato una transición de atenuación más agradable en comparación con la implementación anterior sin ningún efecto. Andy Wihalim, Ingeniero sénior de software, Tokopedia.

Antes

Después

Código

En el siguiente código, se usa un framework de React y se incluye código específico del framework, como flushSync.Obtén más información para trabajar con frameworks para implementar transiciones de vista. 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, se usa el 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 de ayuda, como "por qué comprar", lo que los hace atractivos a la vista y mejora el uso de esas funciones.

Cuando incorporamos las transiciones de vista, eliminamos el código repetitivo de CSS y JavaScript responsable de administrar animaciones en varios estados. Esto ahorró esfuerzo de desarrollo y mejoró significativamente la experiencia del usuario.—Aman Soni, líder de tecnología, Policybazaar.

Ver la animación de transiciones en el CTA "Por qué comprar en Policybazaar" en una página de ficha de inversión

Código

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

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 para 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 el cursor se coloca sobre el elemento, ya que el evento mouseLeave se activará de forma inesperada (cuando el cursor real aún no se mueve).

Recursos

Explora los otros artículos de esta serie en los que se habla de cómo las empresas de comercio electrónico se beneficiaron de usar nuevas funciones de CSS y IU, como animaciones impulsadas por el desplazamiento, popovers, consultas de contenedores y el selector has().