Ver casos de éxito de transiciones

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Las transiciones de vistas son transiciones animadas y fluidas entre diferentes estados de una página web o la IU de una aplicación. El API de View Transition se diseñó para te permiten crear estos efectos de una forma más sencilla y eficaz que la hubiera sido posible antes. La API ofrece múltiples beneficios Enfoques de JavaScript que incluyen:

  • Experiencia del usuario mejorada: Las transiciones fluidas y las señales visuales guían a los usuarios. mediante 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 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. posible, lo que crea animaciones más fluidas.
  • Estética moderna: Las transiciones mejoradas contribuyen a crear un diseño pulido y una experiencia del usuario más atractiva.

Navegadores compatibles

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

Origen

Esta publicación es parte de una serie cómo las empresas de comercio electrónico mejoró su sitio web con nuevas funciones de CSS y de IU. En este artículo, descubrirás cómo algunas empresas implementaron la API de View Transition y se beneficiaron de ella.

redBus

redBus siempre intentó crear la misma paridad entre su red nativa experiencias como sea posible. Antes de la API de View Transition, implementar estas animaciones en nuestros recursos web fue todo un desafío. Pero con la API, intuitiva para crear transiciones a través de múltiples recorridos de usuario para que la Web experiencia más parecida a una aplicación. Todo esto, sumado a los beneficios de rendimiento, debe tener una función para todos los sitios web. Amit Kumar, Ingeniería sénior Administrador, redBus.

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

.
Transiciones de atenuación y deslizamiento en la vista cuando el usuario hace clic en el botón de acceso en la página principal de redBus.

Código

Esta implementación usa animaciones múltiplesview-transition-namey personalizadas (scale-down y scale-up). Usa view-transition-name con un valor único separa el componente de acceso del resto de la página para animarlo por separado. Cuando creas un nuevo view-transition-name único, también se crea un nuevo ::view-transition-group en el árbol de seudoelementos (que se muestra a continuación código), lo que permite manipularlo de forma independiente ::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

El equipo usó transiciones de vista para agregar una animación de atenuación cuando el usuario cambia entre las miniaturas de los productos.

La implementación es muy sencilla, con startViewTransition, inmediatamente obtener una transición de atenuación más agradable en comparación con la implementación anterior sin efectos—Andy Wihalim, software sénior Ingeniero, Tokopedia.

Antes

Después

Código

El siguiente código usa un framework de React e incluye código específico del framework, como flushSync.Más información sobre cómo trabajar con frameworks para implementar de transición. Esta es una implementación básica que comprueba si el navegador es compatible 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

Policybazaar inversión utiliza la API de View Transition en elementos de sugerencias de ayuda, como “por qué comprar”, hacerlos visualmente atractivos y mejorar el uso de esas funciones.

Con la incorporación de las transiciones de vistas, eliminamos el CSS y JavaScript repetitivos. código responsable de administrar animaciones en varios estados. Se guardó y mejoró significativamente la experiencia del usuario.Aman Soni, líder de Tecnología, Policybazaar.

Ver animaciones de transiciones en el artículo "Por qué comprar en Policybazaar" CTA en una página de ficha de inversiones.

Código

El siguiente código es similar a los ejemplos anteriores. Una cosa para tener en cuenta es que anular los estilos y las 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 transición de vistas

Cuando utilices varios efectos de transición de vistas en la misma página, asegúrate de tienen un nombre de transición de vista diferente para cada efecto o sección conflictos.

Mientras una transición de vista esté activa (en transición), agregará una nueva capa en en la parte superior del resto de la IU. Por lo tanto, evita activar la transición al colocar el cursor sobre un elemento, ya que el evento mouseLeave se activará de forma inesperada (cuando el cursor se que todavía no se mueve).

Recursos

Explora los otros artículos de esta serie sobre cómo el comercio electrónico empresas se beneficiaron con el uso de nuevas funciones de CSS y de IU, como las basadas en desplazamientos animaciones, ventanas emergentes, consultas de contenedores y el selector has().