Ver estudos de caso de transições

Swetha Gopalakrishnan

Saurabh Rajpal

As transições de visualização são animações suaves entre diferentes estados da interface de um aplicativo ou página da Web. A API View Transition foi projetada para permitir que você crie esses efeitos de uma maneira mais simples e eficiente do que era possível antes. A API oferece vários benefícios em relação às abordagens anteriores de JavaScript, incluindo:

• Melhor experiência do usuário:transições suaves e indicadores visuais guiam os usuários pelas mudanças na interface, tornando a navegação natural e menos confusa.
• Continuidade visual:manter um senso de continuidade entre as visualizações reduz a carga cognitiva e ajuda os usuários a se orientarem no aplicativo.
• Performance:a API tenta usar o mínimo possível de recursos da linha de execução principal, o que cria animações mais suaves.
• Estética moderna:as transições aprimoradas contribuem para uma experiência do usuário refinada e envolvente.

Esta postagem faz parte de uma série que discute como empresas de e-commerce melhoraram o site usando novos recursos de CSS e UI. Neste artigo, descubra como algumas empresas implementaram e se beneficiaram da API View Transition.

redBus

A redBus sempre tentou criar o máximo de paridade possível entre as experiências nativas e da Web. Antes da API View Transition, implementar essas animações nos nossos recursos da Web era um desafio. Mas com a API, achamos intuitivo criar transições em várias jornadas do usuário para tornar a experiência da Web mais parecida com um app. Tudo isso, aliado aos benefícios de desempenho, torna o recurso indispensável para todos os sites.— Amit Kumar, gerente sênior de engenharia, redBus.

A equipe implementou transições de visualização em vários lugares. Confira um exemplo de uma combinação de animação de entrada gradual e deslizante no ícone de login da página inicial.

Código

Essa implementação usa váriosview-transition-namee animações personalizadas (scale-downe scale-up). Usar view-transition-namecom um valor exclusivo separa o componente de login do restante da página para animá-lo separadamente. A criação de um novo view-transition-name exclusivo também cria um novo ::view-transition-groupna árvore de pseudoelementos (mostrada no código a seguir), permitindo que ele seja manipulado separadamente do ::view-transition-group(root) padrão.

::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

A equipe usou transições de visualização para adicionar uma animação de fade quando o usuário alterna entre miniaturas de produtos.

A implementação é tão fácil que, ao usar startViewTransition, imediatamente temos uma transição de fade mais agradável em comparação com a implementação anterior sem efeitos. Andy Wihalim, engenheiro de software sênior, Tokopedia.

Antes

Depois

Código

O código a seguir usa um framework React e inclui código específico do framework, como flushSync.Leia mais sobre como trabalhar com frameworks para implementar transições de visualização. Essa é uma implementação básica que verifica se o navegador é compatível com startViewTransition e, em caso afirmativo, faz a transição. Caso contrário, ele volta ao comportamento padrão.

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

A vertical de investimento da Policybazaar usou a API View Transition em elementos de dicas de ajuda, como "por que comprar", tornando-os visualmente atraentes e melhorando o uso desses recursos.

Ao incorporar as transições de visualização, eliminamos o código CSS e JavaScript repetitivo responsável por gerenciar animações em vários estados. Isso economizou esforço de desenvolvimento e melhorou significativamente a experiência do usuário.Aman Soni, líder técnico, Policybazaar.

Código

O código a seguir é semelhante aos exemplos anteriores. É possível substituir os estilos e animações padrão de ::view-transition-old(root)e::view-transition-new(root). Nesse caso, o animation-duration padrão foi atualizado para 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;
}

Considerações ao usar a API View Transition

Ao usar vários efeitos de transição de visualização na mesma página, verifique se você tem um nome de transição de visualização diferente para cada efeito ou seção para evitar conflitos.

Enquanto uma transição de visualização está ativa (em transição), ela adiciona uma nova camada na parte de cima do restante da interface. Portanto, evite acionar a transição ao passar o cursor, porque o evento mouseLeave será acionado inesperadamente (quando o cursor real ainda não estiver se movendo).

Recursos

• Transições simples e sem interrupções com a API View Transition
• Explainer: transições de visualização para MPA
• Estudo de caso: navegação integrada possível com transições de visualização
• Estudo de caso: a Web faz tudo isso?? | Oferecer navegações semelhantes a apps
• Proposta de interoperabilidade: disponibilizar transições de visualização em todos os navegadores
• Quer informar um bug ou pedir um novo recurso? Queremos saber sua opinião sobre o SPA e o MPA.

Confira os outros artigos desta série que mostram como as empresas de e-commerce se beneficiaram do uso de novos recursos de CSS e UI, como animações controladas por rolagem, popover, consultas de contêiner e o seletor has().

• Por que os recursos da interface da Web são importantes para seu site de e-commerce?
• Estudos de caso de animações controladas por rolagem
• Estudos de caso da API Popover
• Estudos de caso de consultas de contêiner
• Estudos de caso do seletor:has()