Ver estudos de caso de transições

Swetha Gopalakrishnan

Saurabh Rajpal

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

• Experiência do usuário aprimorada:transições suaves e dicas visuais guiam os usuários por mudanças na interface, tornando a navegação mais natural e menos irritante.
• Continuidade visual:manter uma sensação de continuidade entre as visualizações reduz a carga cognitiva e ajuda os usuários a se manterem orientados dentro do aplicativo.
• Performance:a API tenta usar o menor número possível de recursos da linha de execução principal, criando animações mais suaves.
• Estética moderna:as transições aprimoradas contribuem para uma experiência do usuário refinada e envolvente.

Este post faz parte de uma série que discute como as empresas de e-commerce melhoraram os sites usando novos recursos de CSS e IU. 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, a implementação dessas animações nos nossos recursos da Web era desafiadora. No entanto, com a API, descobrimos que é 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, o torna um recurso essencial para todos os sites: Amit Kumar, gerente de engenharia sênior, redBus.

A equipe implementou transições de visualização em vários lugares. Confira um exemplo de combinação de animação de deslizamento e de desbotamento no ícone de login na página inicial.

Código

Essa implementação usa várias view-transition-name e animações personalizadas (scale-down e scale-up). Usar view-transition-name com um valor exclusivo separa o componente de login do restante da página para animá-lo separadamente. Criar uma nova view-transition-name exclusiva também cria uma nova ::view-transition-group na árvore de pseudoelementos (mostrada no código abaixo), permitindo que ela seja manipulada 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 desbotamento quando o usuário alterna entre as miniaturas do produto.

A implementação é muito fácil. Usando startViewTransition, temos uma transição de desbotamento 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 abaixo usa um framework do React e inclui código específico do framework, como flushSync.Saiba mais sobre como trabalhar com frameworks para implementar transições de visualização. Esta é uma implementação básica que verifica se o navegador oferece suporte a 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

O setor de investimento da Policybazaar usou a API View Transition em elementos de dica de ajuda, como "por que comprar", o que os torna visualmente atraentes e melhora 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ços de desenvolvimento e melhorou significativamente a experiência do usuário.—Aman Soni, líder de tecnologia, Policybazaar.

Código

O código a seguir é semelhante aos exemplos anteriores. É importante observar a capacidade de substituir os estilos e as 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,4s.

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;
}

O que considerar 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 sobre o 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
• Explicação: visualizar transições para MPA
• Estudo de caso: a navegação perfeita é possível com as transições de visualização
• Estudo de caso: o que a Web pode fazer? | Oferecer navegações semelhantes a apps
• Proposta de interoperabilidade: disponibilizar as transições de visualização em todos os navegadores
• Quer informar um bug ou solicitar um novo recurso? Queremos saber sua opinião sobre SPA e MPA.

Confira os outros artigos desta série que explicam como as empresas de e-commerce se beneficiaram do uso de novos recursos de CSS e interface, como animações de rolagem, pop-over, 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 com rolagem
• Estudos de caso da API Popover
• Estudos de caso de consultas de contêiner
• Estudos de caso do seletor:has()