Ver estudos de caso de transições

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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 no 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 mais agradável e sofisticada.

Compatibilidade com navegadores

  • Chrome: 111.
  • Edge: 111.
  • Firefox: não é compatível.
  • Safari: 18.

Origem

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 interface. 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. 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, junto com os benefícios de desempenho, faz com que seja um recurso essencial 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 combinação de animação de desbotamento e deslizamento no ícone de login na página inicial.

Transições de exibição de desbotoes e deslize quando o usuário clica no ícone de login na página inicial da redBus.

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

A vertical de investimentos da Policybazaar usou a API View Transition em elementos de dica 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ços de desenvolvimento e melhorou significativamente a experiência do usuário.—Aman Soni, líder de tecnologia, Policybazaar.

Mostrar a animação de transição na CTA "Por que comprar na Policybazaar?" em uma página de detalhes de investimento.

Código

O código a seguir é semelhante aos exemplos anteriores. Uma observação importante é a capacidade de 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;
}

Pontos a serem considerados 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 estiver ativa, ela vai adicionar uma nova camada acima 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

Confira os outros artigos desta série que falam sobre como as empresas de comércio eletrônico se beneficiaram do uso de novos recursos de CSS e interface, como animações de rolagem, pop-up, consultas de contêiner e o seletor has().